1

我在使用 angular-seed 项目开始的 angular js 项目中遇到了这个问题。这是代码片段：

Search: <input ng-model="searchText" placeholder="Type in a full text search">
<p ng-controller="MyCtrl1">
Search: <input ng-model="searchText">
Showing {{searchText}}.
<ol>
    <li ng-repeat="phone in phones | filter:searchText">
    {{phone.name}} ha {{phone.snippet}}</li>
</ol>
</p>

第一个搜索框有效！第二个没有！我没有得到任何错误来表明什么是错误的。

当我删除ng-controller="MyCtrl1"标记时，两个搜索框都有效！教程、angular-phonecat 和 angular-seed 项目有些不同。种子项目使用这种代码将控制器分配给视图。

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

phonecat 项目使用该ng-controller="MyCtrl1"标记。显然我不需要两次声明我的控制器，所以删除它对我来说是有意义的。

这解决了问题，但为什么会发生这种情况？

（另外我想把这些信息放到 SO 中，以防其他人遇到这个问题）

4

2 回答 2

6

In AngularJS, each controller creates a new scope. So you need to use $parent to access the model defined at the outer controller if you have nested controllers:

<div ng-app ng-controller="MyCtrl1">Search:
    <input ng-model="searchText" placeholder="Type in a full text search">
    <p ng-controller="MyCtrl1">Search:
        <input ng-model="$parent.searchText">Showing {{searchText}}.
        <ol>
            <li ng-repeat="phone in phones | filter:searchText">{{phone.name}} ha {{phone.snippet}}</li>
        </ol>
    </p>
</div>
于 2013-08-09T19:53:31.960 回答
2

ng-controller="MyCtrl1"有自己的范围。根据文档 ngController 指令将行为分配给范围。这是 Angular 如何支持模型-视图-控制器设计模式背后的原则的一个关键方面。其次，Angular 具有惰性绑定特性，您不会看到错误。

于 2013-08-09T19:58:47.783 回答