时间戳

首页 > 解决方案 > AngularJS 控制器不与 HTML 绑定

angularjs - AngularJS 控制器不与 HTML 绑定

问题描述

请在下面找到我的控制器 javascript 文件 -

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

angular.module('myApp').factory('myFactory', function () {
  var myFactory = {};

  myFactory.list = [];

  myFactory.add = function (message) {
    myFactory.list.push({ id: myFactory.list.length, text: message });
    //return myFactory;
  };

  return myFactory;
});

angular.module('myApp').controller('Controller1', function (myFactory) {

  var myVar = this;

  myVar.myList = myFactory.List;

});

angular.module('myApp').controller('Controller2', function (myFactory) {

  var myVar = this;

  myVar.newMessage = 'Hello World!';

  myVar.addMessage = function (message) {
    myFactory.add(message);
    myVar.newMessage = '';
  };

});

还有我下面的HTML文件-

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
    </head>
    <body ng-app="myApp">

      <div>
        <h1>Services</h1>

        <div' ng-controller="Controller1">
          <p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>
        </div'>
      </div>


      <div ng-controller="Controller2 as post">
        <form ng-submit="post.addMessage(post.newMessage)">
          <input type="text" ng-model="post.newMessage">
          <button type="submit" 
            ng-click="post.addMessage(post.newMessage)">
            Add Message
          </button>

        </form>
      </div>

    </body>
  </html>
  <script src="Scripts/angular.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
  <script src="Scripts/angular.js"></script>

我看不到“Controller1”返回的数据

当我运行代码时，我看不到来自 Controller1 的结果，这意味着该列表未与 .html 页面中的 ng-controller 绑定

请告诉我哪里错了。

标签： angularjscontrollerfactory

解决方案

您没有正确引用您的列表：

<p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>

如果你打算使用myVar来存储你的列表，你应该使用Controller as语法，以便你的模板有一个对变量的引用：

<div ng-controller="Controller1 as myVar">
  <p ng-repeat="m in myVar.myList">{{ m.id }}: {{ m.text }}</p>
</div>

推荐阅读