Question

我正在尝试使用一个非常简单的示例来定义HTML和js中的控制器。肯的控制器工作。芭比娃娃没有。那是为什么？

http://jsfiddle.net/laurencefass/b18w58kc/1/

 <div ng-app='demo'>
  <p ng-controller='MyCtrl'>Hi, it's Ken. The current time is {{ken_time}}</p>
  <p>Hi, it's Barbie. The current time is {{barbie_time}}</p>

角度代码

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

function MyCtrl ($scope) {
    $scope.ken_time = new Date().toTimeString();
}

app.controller('BarbieCtrl', function($scope) {
    $scope.barbie_time = new Date().toTimeString();
});

Answer 1

您已定义demo并将其用作app。

var demo = angular.module('demo', []);
    ^^^  -->//defined

用于：

app.controller('BarbieCtrl', function($scope) {
^^^ --> //app is undefined

注意：接线控制器时需要ng-controller。

Working DEMO

完整代码段：

<div ng-app='demo'>
    <p ng-controller='MyCtrl'>Hi, it's Ken. The current time is {{ken_time}}</p>
    <p ng-controller='BarbieCtrl'>Hi, it's Barbie. The current time is {{barbie_time}}</p>
</div>

Answer 2

您正在访问app.controller，而不是demo.controller。

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

function MyCtrl ($scope) {
    $scope.ken_time = new Date().toTimeString();
}

demo.controller('BarbieCtrl', function($scope) {
    $scope.barbie_time = new Date().toTimeString();
});

此外，您需要为芭比时间定义一个控制器：

<p ng-controller='BarbieCtrl'>Hi, it's Barbie. The current time is {{barbie_time}}</p>

Answer 3

您忘记连接控制器：添加ng-controller='BarbieCtrl'

<div ng-app='demo'>
  <p ng-controller='MyCtrl'>Hi, it's Ken. The current time is {{ken_time}}</p>
  <p ng-controller='BarbieCtrl'>Hi, it's Barbie. The current time is {{barbie_time}}</p>
</div>

此外，您需要将控制器添加到正确的应用：demo.controller而不是app.controller

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

function MyCtrl ($scope) {
    $scope.ken_time = new Date().toTimeString();
}

demo.controller('BarbieCtrl', function($scope) {
    $scope.barbie_time = new Date().toTimeString();
});

Answer 4

试着解释一下这里没有用的东西。

在您的html中，您已将app定义为demo，而您用于barbie_time的控制器与app关联。并且没有app模块。
MyCtrl也是一个独立的控制器，与任何模块都没有关联。还没有演示。

要使其正常工作，您必须使用demo模块绑定控制器，并需要使用ng-controller指令附加控制器，如下所示

      <div ng-app='demo'>
      <p ng-controller='MyCtrl'>Hi, it's Ken. The current time is  {{ken_time}}</p>
      <p ng-controller="BarbieCtrl">Hi, it's Barbie. The current time is {{barbie_time}}</p>


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

      function MyCtrl ($scope) {
        $scope.ken_time = new Date().toTimeString();
      }

      demo.controller('BarbieCtrl', function($scope) {
        $scope.barbie_time = new Date().toTimeString();
      });

看到你的工作小提琴：http://jsfiddle.net/b18w58kc/5/ 新手与单词app混淆，因为在角度定义模块时非常常见。 app在AngularJS中没有像模块一样工作的关键字，你必须定义一个像模块一样工作。希望这对你有所帮助。

HTML ng-controller与app.controller（）格式不一致

4 个答案: