Question

我在应用程序中使用angularjs作为我的模块之一。我想在页面上更新各个位置的UI，以便所有ui组件在模型值更改时同步工作。

这是我的HTML -

<fieldset ng-controller="controller1" >
        <legend>Divs with common controller</legend>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
    </fieldset>

    <fieldset ng-controller="controller1" >
        <legend>Divs with common controller</legend>
        <div style="background-color:#eee;padding:3px;" ng-controller="controller2">
            <input type="text" ng-model="Model1" />
            <input type="text" ng-model="Model2" />
        </div>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
    </fieldset>

和我的javascript -

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

        testApp.controller("controller1",['$scope',function($scope){
            $scope.Model1 = "testText";
        }]);

        testApp.controller("controller2",['$scope',function($scope){
            $scope.Model2 = "testText2";
        }]);
        angular.bootstrap(document, ['mainApp']);

在第一个字段集的html中，它正常工作。但在第二个字段集中它不是。所以任何人都可以请告诉我如何在第二个字段集中实现第一个字段集的功能。感谢。

Answer 1

使用$rootScope代替$scope

Answer 2

您可以将ng-controller =“controller2”用于特定输入。试试这个

<div style="background-color:#eee;padding:3px;"> <input type="text" ng-model="Model1" /> <input type="text" ng-model="Model2" ng-controller="controller2" /> </div>

Answer 3

它不起作用，因为您为controller1创建了2个单独的范围/实例

<div>
   // Root scope
   <div ng-controller="controller1">
      // Child scope A
      // scope = new controller1();
   </div>
   <div ng-controller="controller1">
      // Child scope B
      // scope = new controller1();
   </div>
</div>

您可以直接使用$rootScope或创建服务来解决此问题。建议的方法是尽可能避免$rootScope并改为使用服务。

值可能是创建服务的最简单方法。请注意，您还可以使用.service或.factory。请阅读有关服务的文档。

testApp.value('myValue', {
    data: 'testText'
});

我在这里使用一个对象，所以我们可以使用它作为值的引用，这对于在控制器之间共享数据很重要。如果你想知道为什么然后阅读更多关于参考和＆amp;价值类型。

现在将此服务注入您的控制器并改为使用此数据：

testApp.controller("controller1",['$scope', 'myValue',function($scope, myValue){
    $scope.Model1 = myValue;
}]);

在视图中，我们需要更新绑定到服务的引用：

<input type="text" ng-model="Model1.data" />

JSFIDDLE

Answer 4

使用点！ ng-model没有“。”不好。请阅读这个 What are the nuances of scope prototypal / prototypical inheritance in AngularJS? 这个问题在那里得到了充分的描述。

AngularJs - 模型值不反映嵌套控制器中的ui情况

4 个答案: