Question

哟大家好今天我正在学习一些关于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}}

我如何解决这个问题？

Answer 1

你缺少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>

AngularJS绑定变量

1 个答案: