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>

最初の検索ボックスが機能します。2番目はそうではありません!何が間違っているかを示すエラーは表示されません。

マークアップを削除すると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"マークアップを使用します。明らかに、コントローラーを 2 回宣言する必要はないので、コントローラーを削除することは理にかなっています。

これで問題は解決しましたが、なぜこのようなことが起こるのでしょうか?

(また、他の誰かがこの問題に遭遇した場合に備えて、この情報をSOに入れたいと思いました)

4

2 に答える 2