AngularJS指令中的双向绑定属性

时间:2015-04-15 12:38:09

标签: angularjs angularjs-directive angularjs-scope

我有一个自定义指令:

.directive('test', function () {

    return {
        scope: {},

        link: function (scope, element, attr) {

            scope.$parent.$watch(attr.selectedItem, function(newValue, oldValue){
                scope.selectedItem = newValue;
            });
         }
}

这样就可以单独将我的指令范围selectedItem属性绑定到属性中设置的值

<div test selectedItem="thePropertyOnTheController"></div>

但是,如果我想双向绑定怎么办?有没有一种简单的方法可以在没有$watch指令范围的selectedItem属性$parseattr.selectedItem scope.$parent?的情况下进行设置{1}}表达式并在{{1}}

上解析表达式时调用assign

2 个答案:

答案 0 :(得分:1)

$scope.thePropertyOnTheController可能有一些像“Hello”

的值

HTML

   <div ng-repeat="photosets in userPhotoSetList">
     <photosets photosetsarray="photosets.photosetDetail">
  </div>

脚本:

.directive('photosets', function () {
  return {
      scope: {
               photosetslist : "=photosetsarray"
             },
      link: function (scope, element, attr) {
       console.log(scope.photosetslist);
       //"Hello" is output
     }
}

如果您看到photosetsarray="photosets.photosetDetail"" photosetsarray

            scope: {
               photosetslist : "=photosetsarray" **//this name is same as assignee attr**
             },

html中的左侧变量名必须=指令中的右侧变量名

答案 1 :(得分:0)

在这些情况下要小心变量命名。绑定到在指令中声明为camel case的属性不能从DOM中访问。

.directive('test', function () {
  return {
      scope: {
               item : "=selectedItem"
             },
      link: function (scope, element, attr) {
         //do some stuff
     }
}

所以要正确地将此属性绑定到控制器上的变量:

<div test selected-item="thePropertyOnTheController"></div>