AngularJS - директива с нг-transclude, никакой привязка

Смотрите, DEMO AngularJS - директива с нг-transclude, никакой привязка

<body ng-controller="MainCtrl"> 

    {{ obj }} 

    <dir> 
     <input type="text" ng-model="obj" /> 
    </dir> 

    </body>

Почему при изменении переменной obj области в пользовательской директиве с ng-transclude я не меняю его в MainCtrl$scope.obj двухсторонних ,

Но когда у меня есть $scope.obj = { name : 'test' }; в MainCtrl, двусторонняя переписка работает так, как я ожидаю.

Смотрите рабочий DEMO

<body ng-controller="MainCtrl"> 

    {{ obj.name }} 

    <dir> 
     <input type="text" ng-model="obj.name" /> 
    </dir> 

    </body>

Что такое объяснение такого поведения?

источник

2015-02-13 Dilyan Dimitrov

Возникла проблема с доступом к примитивным переменным в родительской области из области содержимого. У вас есть дочерняя область, потому что transclude: true создает новую область.

Вы действительно должны прочитать this article, чтобы иметь глубокое понимание того, что происходит.

Основные моменты из статьи:

Область наследования обычно проста, и вы часто не даже не нужно знать, что происходит ... пока не попробуешь 2-способ связывания данных (т.е. , элементы формы, ng-model) к примитиву (например, number, string, boolean), определенному в родительской области изнутри дочерней области.

Этот вопрос с примитивами можно легко избежать, следуя «лучшей практики», чтобы всегда иметь «» в ваших ng-моделях.

Случается, что с родительской областью не консультироваться, когда дело касается примитивов. Это вещь Javascript, даже не Угловая.

Я также создал объект Demo объекта, скрывающегося от области содержимого. (Затенение непримитивного объект):

app.directive('dir', function() { 
    return { 
     restrict: 'E', 

     scope: true, 
     template: "<div><input type=\"text\" ng-model=\"obj.name\" /></div>", 
     link: function(scope, element, attrs) { 
      scope.obj = {name : "newname"}; 
     } 

    }; 
});

источник

2015-02-13 16:13:49

Большое спасибо за это полезная информация и ссылки. –

HTML генерация включена через дочернюю сферу MainCtrl при записи этого новое свойство (obj) ребенок сфера генерировать новый, который перезаписать родитель.

Цепь прототипа не обрабатывается, и новое свойство aString добавляется к childScope. Это новое свойство скрывает/затеняет свойство parentScope с тем же именем.

Модифицированная версия работает, потому что ребенок сфера (включены через) доступ первой к OBJ (ссылка), а затем имя свойства

Узнайте больше о сфере наследования в https://github.com/angular/angular.js/wiki/Understanding-Scopes

И на включение и поведение сферы в http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

источник

2015-02-13 16:43:05 pdorgambide

Спасибо за объяснение –

Это работает, когда вы советуете значение obj из тех же сфер - сфера Директивы:

<body ng-controller="MainCtrl"> 
 

 
    {{ obj }} 
 

 
    <dir> 
 
    <p> 
 
     The following text will be synched with the model: 
 
    </p> 
 
    <span>{{ obj }}</span> 
 
    <br/> 
 
    <input type="text" ng-model='obj' /> 
 
    </dir> 
 

 
</body>

источник

2015-03-03 23:21:13 Yiling

AngularJS - директива с нг-transclude, никакой привязка

ответ

Смежные вопросы