Angularjs结合变量

yo大家。今天，我正在学习有关Angularjs的知识。在我的项目中，我尝试将控制器用作语法。

app.js

"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
    this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
    console.log('New', newValue, 'Old:', oldValue);
});
}]);

index.html

<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
    <p>This is the parent: {{parent.message}}</p>
    <p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
    <p>This is the parent: {{parent.message}}</p>
    <p>This is the secondChild:{{second.message}}</p>
    <p>Randomize:{{second.value}}</p>
</div>      
</div>
</body>
</html>

当我尝试加载页面时，这是我的输出：

这是父母：{{parent.message}}

这是第一个孩子：{{first.message}}

这是父母：{{parent.message}}

这是第二个孩子：{{second.message}}

随机化：{{second.value}}

我如何解决此问题？

您缺少ng-app

<body ng-app="myApp">

演示

"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
    this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
    console.log('New', newValue, 'Old:', oldValue);
});
}]);

<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
    <p>This is the parent: {{parent.message}}</p>
    <p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
    <p>This is the parent: {{parent.message}}</p>
    <p>This is the secondChild:{{second.message}}</p>
    <p>Randomize:{{second.value}}</p>
</div>      
</div>
</body>
</html>

相关内容

最新更新

热门标签：