Почему, при наличии ng-if, отсутствует связка данных в директиве с родительским scope? (та же самая беда с ng-repeat)
В примере кнопки выше черты выводятся в элементе с ng-if, ниже - без. При клике тех что с ng-if - $watch не срабатывает, можно увидеть в консоли.
Что же делать, как же быть?
var App = angular.module('app',[]);
App.directive('myDir', function(){
return {
scope: {
Count: '=countmodel'
},
restrict: 'EA',
template: '<button ng-click="doSome()">Set <span ng-bind="countType"></span></button>',
link: function($scope, iElm, iAttrs, controller) {
$scope.countType = iAttrs['counttype'];
$scope.doSome = function() {
console.log('doSome() run ...')
$scope.Count = $scope.countType;
}
}
}
});
App.controller('myCtrl',['$scope', function($scope) {
$scope.countModel = 'Kuku';
$scope.showBtn = true;
$scope.$watch('countModel', () => {
console.log('[$watch] Change "countModel"');
});
}])
<!DOCTYPE html>
<html ng-app="app" ng-controller="myCtrl">
<head>
<script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Значение: <span ng-bind="countModel"></span></h1>
<div ng-if="showBtn" my-dir countmodel="countModel" counttype="Pam pam"></div>
<div ng-if="showBtn" my-dir countmodel="countModel" counttype="tutut"></div>
<div ng-if="showBtn" my-dir countmodel="countModel" counttype="kuku"></div>
---
<div my-dir countmodel="countModel" counttype="Без ngIf - 1"></div>
<div my-dir countmodel="countModel" counttype="Без ngIf - 2"></div>
</body>
</html>
При всё этом есть и рабочий вариант, но через глубокое слежение и присвоение параметра: http://plnkr.co/edit/y0Guu9X9fGxP6OjGL04O