Область действия директивы не обновляется в контроллере

Question

Контроллер моей директивы не обновляется с областью действия, которая была установлена ​​с помощью двусторонней привязки '='.

Вот моя директива:

.directive('navigation', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     selection: '=?selectedItem', 
     goforward: '&onForward' 
     }, 
     controller: function() { 
     var vm = this; 
     vm.hideForward = !vm.selection 
     }, 
     controllerAs: 'vm', 
     bindToController: true, 
     template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>' 
    }; 
    }); 

Вот мой HTML файл, в котором я использую директиву:

<div class='product' ng-click='ctrl.selectedItem = true'>item</div> 
<navigation on-forward="ctrl.goForward()" selected-item='ctrl.selectedItem'></navigation> 

примечание: в ctrl.goForward() работает просто отлично.

vm.selectedItem в контроллере html установлен только на true после нажатия на кнопку div продукта.

Я ожидал, что ctrl.selectedItem перейдет в контроллер моей директивы и изменит значение vm.hideForward, за исключением того, что этого не происходит.

Я хочу, чтобы иметь возможность изменить видима ли и/или активная в зависимости от переменных, которые передаются в него из сферы действия каких бы то ни контроллера я использовал свою директиву в директиве навигации.

Если я помещаю <div>{{vm.selectedItem}}</div> внутри мой шаблон директивы, который правильно печатает в зависимости от того, как изменяется значение значения ctrl.selectedItem. Моя проблема заключается в том, что контроллер контролера также изменится.

Как я устанавливаю эту привязку сфера неправомерно? Я использую угловой 1.5.3

Answer 1

Вам не нужны двойные скобки для связывания функции нг щелкни, используйте ng-click="vm.goforward()"

Передайте функцию директивы, как on-forward="ctrl.goForward", если вы используете скобку вы будете Проходя мимо результат вызова функции.

Также для, ng-click='ctrl.selectedItem === true' вы должны использовать ng-click='ctrl.selectedItem = true', чтобы установить значение, так как === является оператором сравнения.

Answer 2

ctrl.selectedItem представляется переменной от текущего контроллера. Таким образом, при прохождении его в качестве атрибута, вы должны передать его как «{{ctrl.selectedItem}}»

Попробуйте использовать:.

**<navigation on-forward="ctrl.goForward()" selected-item='{{ctrl.selectedItem}}'></navigation>** 

Answer 3

Попробуйте

.directive('navigation', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     selection: '=selectedItem', 
     goforward: '&onForward' 
     }, 
     controller: function(scope) { 
     var vm = this; 
     vm.hideForward = !scope.selection 
     }, 
     controllerAs: 'vm', 
     bindToController: true, 
     template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>' 
    }; 
    });