Question

我刚开始从w3school.com学习Angular js。

我有一个关于控制器的简单问题。

因为这是我的代码。

<html>

<body>
<div ng-app="" ng-Controller="HomeController">
<p> {{person.lname}}</p>
<p>First Name = <span ng-bind="person.fname"></span></p>
<p>Enter Details</p>
<p>First Name : <input type="text" ng-model="person.fname"/></p>
<p>Last Name : <input type="text" ng-model="person.lname"/></p>
<p>Middle Name : <input type="text" ng-model="person.mname"/></p>
</div>
</body>
<script src="angular.min.js"></script>
<script>
    function HomeController($scope)
    {
        $scope.person={
            fname:'Amit',
            lname:'Kumar',
            mname:'Verma'
        }
    }
</script>
</html>

如您所见，我使用controller来绑定值。只要我更改textbox的值，它就会反映在p标记中。意味着它调用了Homecontroller，但它并没有调用该控制器。我通过在firbug中设置调试点来检查。它应该调用homeController。

因为我是新人，所以这可能是一个简单的问题。

Answer 1

如Yoshi所述，请阅读official guide以获得更好的开始。他们在那里提供tutorials，然后你可以从其他来源开始寻找。

要回答您的问题，每次对其模型进行更改时，实际上都不会调用控制器HomeController。控制器提供了一种在scope内对模型和函数进行分组的方法。在控制器内部，您可以添加可在视图中触发的功能。

这是一个fiddle，它向你的控制器显示一个模型和一个函数。

// model
$scope.person = {
    fname: 'Amit',
    lname: 'Kumar',
    mname: 'Verma'
}

// function
$scope.resetNames = function() {
    console.log('I am called!');
    $scope.person.fname = 'Amit';
    $scope.person.lname = 'Kumar';
    $scope.person.mname = 'Verma';
}

祝你学习顺利！

Answer 2

请阅读控制器上的Official AngularJS doc及其工作原理。

你可能误解了它们是如何工作的，从而期待不同的结果。建议遵循官方文档指南并执行以下操作：

var myApp = angular.module('myApp',[]);

myApp.controller('HomeController', ['$scope', function($scope) {
  $scope.person={
        fname:'Amit',
        lname:'Kumar',
        mname:'Verma'
  }
}]);

这里也是一个工作小提琴： http://jsfiddle.net/hpeinar/LxyL8e5k/

Answer 3

从角度1.3开始，不再支持全局控制器功能。

您应该按以下方式注册您的控制器：

app.controller('HomeController', HomeController);

在Angular js中调用Controller

3 个答案: