AngularJS - Почему моя фабрика не обновляет DOM? - PullRequest
Новая
       34

AngularJS - Почему моя фабрика не обновляет DOM?

0 голосов
/ 21 сентября 2018

В моем 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 - нет.Это почему?Как заставить это измениться?

РЕДАКТИРОВАТЬ: Извините, я должен был быть более ясным.Я хочу, чтобы два контроллера были разделены.Я хочу знать, как делиться областями, чтобы они оба обновлялись при изменении одного из них.

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Не дублируйте контроллер.Добавьте его в одном месте. 

<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>
0 голосов
/ 21 сентября 2018

Это потому, что вы установили директиву ng-controller дважды.Это создаст два отдельных экземпляра вашего контроллера с двумя отдельными областями действия.Значение в h1 никогда не изменится, потому что оно находится в области, отличной от указанной в теге span - их значения в основном принадлежат двум разным объектам.Обработчик события кнопки изменит только значение в соответствующем контроллере - значение span изменится, а h1 всегда останется прежним.

Как правило, вы никогда не захотите иметь два отдельных экземпляра одного и того жеконтроллер (за исключением редких случаев использования).

...