如何綁定指令作用域的深層子屬性？

我們可以將指令的範圍屬性綁定到DOM屬性的值。

這工作：

module.directive 'MyDirective', -> 
    scope: 
    directiveVar: '='

...

<div class='MyDirective' directive-var='parentVar'></div>

在上例中，我們指令的directiveVar屬性綁定到父作用域的parentVar財產。

這是一個雙向綁定，所以如果directiveVar被更改parentVar會自動更新，反之亦然。

我的問題是：

有沒有我可以在我的指示的範圍的深子屬性綁定，而不是一個辦法嗎？像scope.lv1.directiveVar或scope.lv1.lv2.lv3.directiveVar而不是scope.directiveVar？

Docs I read

我想實現

我有一個名爲lv1指令範圍的對象。我想將其屬性directiveVar綁定到父屬性。

這不起作用：

scope: 
    lv1: 
     directiveVar: '='

而且這不起作用：

scope: 
    "lv1.directiveVar": '=myVar'

演示

這是什麼在起作用：http://plnkr.co/edit/OClnZ2Cl3BXr60PC2qVP?p=preview

這就是我想實現的：http://plnkr.co/edit/tQEHeKOzGjGyplCwUtU2?p=preview

來源

2014-02-17 Evgenii

你的目的/目的是什麼？你想達到什麼目的？（它可以幫助人們給你更好的答案）。孩子們是否也有更多的指令或指令和控制器？ –

同意，這裏沒有足夠的信息關於你想要達到的目標。如果parentVar/myVar是一個對象，則應該使用'='而不是'@'來綁定對象而不是字符串。 –

@CorySilva感謝您的反饋。我想實現：而不是綁定我的指令的作用域的根屬性，我想綁定一個深層的屬性。更新了問題以使其更清楚。 – Evgenii

我希望這段代碼能幫上忙。你可以傳入一個對象並觀察它的屬性，或者你可以在父/子指令中嵌套。無論哪種方式添加「=」將啓用整個對象的雙向綁定。

控制器：

$scope.directiveVar = { 
    level1: { 
     greeting: 'Hello' 
    } 
}; 
$scope.otherVar = { 
    levelA: { 
     foo: 'bar' 
    } 
};

標記：

<div data-my-parent-directive data-other-var="otherVar"> 
    <div data-my-directive data-directive-var="directiveVar"></div> 
</div>

指令：

angular.module('MyDirective', []) 
.directive('myParentDirective', ['$window', 
    function ($window) { 
     return{ 
      restrict: 'AE', 
      scope:{ 
       otherVar: '=' 
      }, 
      controller: function($scope, $element) { 
       var othis = this; 
       this.element = $element; 
       this.otherVar = $scope.otherVar; 
      } 
     }; 
    } 
]) 
.directive('myDirective', ['$window', 
    function ($window) { 
     return { 
      restrict: 'AE', 
      require: '?myParentDirective', 
      scope: { 
       directiveVar: '=' 
      }, 
      link: function(scope, elm, attr, myParentDirectiveCtrl) { 
       console.log(myParentDirectiveCtrl.otherVar); 
       console.log(myDirectiveParentCtrl.otherVar.levelA); 
       scope.$watch('directiveVar.level1', function (newValue, oldValue){ 
        console.log(newValue, oldValue); 
       }); 
      } 
     }; 
    } 
])

編輯：

你可以簡單地這樣做：

<div data-my-parent-directive data-other-var="otherVar"> 
    <div data-my-directive data-directive-var="directiveVar.level1"></div> 
</div>

建模數據時非常有用。例如：

var items = apiService.getItems(); 
var layers = [...], 
$scope.map = { 
    points: items, 
    layers: layers, 
    highAltMap: 'Streets', 
    lowAltMap: 'Satellite' 
};

也就是說如果你模擬數據看到這個ng-conf video我相信揚聲器觸及了一些OO模式。

編輯2：

你可以使用一個服務like this plunker

來源

2014-02-18 00:47:13

非常感謝@CorySilva。我是AngularJS的新手，只有6個月的練習。我想要實現的是綁定子屬性（directiveVar.level1），而不向整個對象（directiveVar）提供父訪問權限。有沒有簡單的方法來在指令的聲明中聲明它，而不需要編寫大量的代碼？ – Evgenii

哦。耶，當然了。請參閱我的編輯 –

感謝您的更新。 data-directive-var =「directiveVar.level1」綁定父範圍的深層屬性「level1」，這很好。但是我需要相反的：綁定CHILD範圍的深層屬性，比如「lv1.directiveVar」：「= var」。對不起，這裏很難解釋AngularJS的細節，我的不好。 – Evgenii

我知道這個問題的日期，但...

Create json object in attribute

return { 
 
    scope: { 
 
    date: "=", 
 
    formChange: "=?", 
 
    ngDisabled: "=?", 
 
    deepInclude: "=?" 
 
    }, 
 
    ...

<user-date-without-current-date date="cv.dateBirthday" deep-include="{cnt:cv.dateBirthday}" form-change="$parent.form_change"></user-date-without-current-date>

是否有用？

來源

2017-03-03 12:04:07 Satabol

如何綁定指令作用域的深層子屬性？

回答

相關問題