AngularJs Атрибут Directive 2 Way Binding

У меня есть угловое приложение, как этотAngularJs Атрибут Directive 2 Way Binding

Javascript:

(function(angular, module){ 

    module.controller("TestController", function($scope){ 
     $scope.magicValue = 1; 
    }); 

    module.directive("valueDisplay", function() { 
     return { 
      restrict: "A", 
      template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />', 
      replace: false, 
      scope: { }, 
      link: function (scope, element, attrs) { 
       var pValKey = attrs.valueDisplay; 

       // Copy value from parent Scope. 
       scope.value = scope.$parent[pValKey]; 

       scope.$parent.$watch(pValKey, function(newValue) { 
        if(angular.equals(newValue, scope.value)) { 
         // Values are the same take no action 
         return; 
        } 
        // Update Local Value 
        scope.value = newValue; 
       }); 

       scope.$watch('value', function(newValue) { 
        if(angular.equals(newValue, scope.$parent[pValKey])) { 
         // Values are the same take no action 
         return; 
        } 
        // Update Parent Value 
        scope.$parent[pValKey] = newValue; 
       }); 
      } 
     }; 
    }); 

}(angular, angular.module("Test", [])));

HTML:

<!DOCTYPE html> 
<html> 

    <head> 
     <script data-require="[email protected]*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
    </head> 

    <body ng-app="Test"> 
     <div ng-controller="TestController"> 
      <ol> 
       <li> 
        <span>Parent Val: </span>{{ magicValue }}<br/> 
        <span>Parent Change:</span><input data-ng-model="magicValue" /> 
       </li> 
       <li data-value-display="magicValue"></li> 
      </ol> 
     </div> 
    </body> 
</html>

ИТАК Это работает и все, кроме Мне интересно, нет ли лучшего способа сделать это двухстороннее связывание, которое я установил здесь ?

Имейте в виду, что я хочу изолированную область &, что я знаю, что могу определить дополнительные атрибуты и использовать '=', чтобы иметь двухстороннюю привязку данных между родительским и изолированным областями. Я хотел бы что-то подобное, но где данные перешел в атрибут директивы, как у меня здесь.

источник

2013-10-28 DeMeNteD

Что мешает вам использовать сферы: {valueDisplay: ' = valueDisplay '}? вам не нужно настраивать часы, и значение по-прежнему находится в атрибуте. Также хрупко использовать $ parent, так как вы никогда не можете быть уверены, что значение действительно установлено в родительском. – Narretz

Вы можете сделать это гораздо больше, используя изолированный объем.

Просьба обновить plunker.

Вы можете двухстороннюю связать значение вашей директивы с value: '=valueDisplay'

= говорит Угловое вы хотите двухстороннюю привязку:

module.directive("valueDisplay", function() { 
    return { 
     restrict: "A", 
     template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />', 
     replace: false, 
     scope: { value: '=valueDisplay' }, 
     link: function (scope, element, attrs) { 

     } 
    }; 
    });

источник

2013-10-28 09:54:49

Был в середине написания того же самого, но вы прибили его. OP действительно просто написал то, что делает Angular для вас. –

Спасибо большое. Не знал, что ты можешь так поступить. – DeMeNteD

AngularJs Атрибут Directive 2 Way Binding

ответ

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