Question

在我的html中，我有：

<body ng-app='myApp'>
    <h1 ng-controller='controller'>
        {{YesOrNo}}
    </h1>
    <div ng-controller='controller'>
        <span>{{YesOrNo}}</span>
        <button ng-click='setYesOrNo()'>Click Me</button>
    </div>
    <script src='script.js'></script>
</body>

script.js：

const myApp = angular.module('myApp', [])

myApp.controller('controller', ['$scope', 'factory', function($scope, factory) {
    $scope.YesOrNo = factory.getYesOrNo()
    $scope.setYesOrNo = function() {
        $scope.YesOrNo = factory.setYesOrNo()
    }
}])

myApp.factory('factory', function() {
    let YesOrNo = 'Yes'
    return {
        getYesOrNo: function() { 
            return YesOrNo 
        },
        setYesOrNo: function() {
            YesOrNo = YesOrNo === 'Yes' ? 'No' : 'Yes'
            return YesOrNo
        }
    }
})

当我单击按钮时，跨度会更改，但h1不会更改。这是为什么？我如何改变它？

编辑：对不起，我应该更清楚了。我希望两个控制器分开。我想知道如何共享范围，以使它们中的一个发生更改时都可以更新。

Answer 1

那是因为您已经两次设置了ng-controller指令。这将创建具有两个单独作用域的控制器的两个单独实例。 h1中的值永远不会改变，因为它的范围与span标记中的值不同-它们的值基本上属于两个不同的对象。该按钮的事件处理程序将仅更改相应控制器中的值-span的值将更改，而h1将始终保持不变。

通常，您永远都不想拥有同一控制器的两个单独的实例（罕见的用例除外）。

Answer 2

不复制控制器。将其添加到一个地方。

<div ng-app='myApp'  ng-controller='controller'>
    <h1  >
        {{YesOrNo}}
    </h1>
    <div>
        <span>{{YesOrNo}}</span>
        <button ng-click='setYesOrNo()'>Click Me</button>
    </div>
    <script src='script.js'></script>
</div>

演示

 
 
const myApp = angular.module('myApp', [])

myApp.controller('controller', ['$scope', 'factory', function($scope, factory) {
    $scope.YesOrNo = factory.getYesOrNo()
    $scope.setYesOrNo = function() {
        $scope.YesOrNo = factory.setYesOrNo()
    }
}])

myApp.factory('factory', function() {
    let YesOrNo = 'Yes'
    return {
        getYesOrNo: function() { 
            return YesOrNo 
        },
        setYesOrNo: function() {
            YesOrNo = YesOrNo === 'Yes' ? 'No' : 'Yes'
            return YesOrNo
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp'  ng-controller='controller'>
    <h1  >
        {{YesOrNo}}
    </h1>
    <div>
        <span>{{YesOrNo}}</span>
        <button ng-click='setYesOrNo()'>Click Me</button>
    </div>
    <script src='script.js'></script>
</div>

AngularJS-为什么我的工厂不更新DOM？

2 个答案: