1

Почему, при наличии 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>

Пример на plunkr

При всё этом есть и рабочий вариант, но через глубокое слежение и присвоение параметра: http://plnkr.co/edit/y0Guu9X9fGxP6OjGL04O

1 ответ 1

1

Это происходит потому, что ng-If создает новую дочернюю область. Если вы хотите привязать данные к родительской области, то можно обратится на один уровень вверх к $parent. Можете посмотреть здесь, чтобы лучше понять наследование области видимости.

angular.module('testApp', [])
  .directive('testDir', function () {
    return {
      restrict: 'A',
      template: '<input ng-model="foo"><input ng-model="foo">' +
         '<div ng-if="bool"><input ng-model="$parent.foo"></div>',
      link: function (scope, elem, attrs) {
        scope.foo = "bar";
        scope.bool = true;       
      }
    }
  });

Пример здесь.

Еще один обходной путь это использование dot нотации:

<div ng-if="bool"><input ng-model="data.foo"></div>
2
  • Тогда почему работает здесь? plnkr.co/edit/y0Guu9X9fGxP6OjGL04O 20 мая 2016 в 13:20
  • 1
    @AlexeyLemesh, потому что тут изменяются поля объекта, а не ссылка на сам объект
    – Grundy
    20 мая 2016 в 13:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.