Question

我使用angular-seed项目启动的角度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中以防其他人遇到这个问题）

Answer 1

在AngularJS中，每个控制器都会创建一个新范围。因此，如果您有嵌套控制器，则需要使用$parent来访问外部控制器上定义的模型：

<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>

Answer 2

ng-controller="MyCtrl1"有自己的范围。根据{{3}} ngController指令将行为分配给作用域。这是角度如何支持模型 - 视图 - 控制器设计模式背后的原则的一个关键方面。第二，Angular具有延迟绑定性质，您将看不到错误。

角度过滤器不起作用

2 个答案: