如何從父範圍繼承複雜的屬性到我的指令的隔離範圍

在查看有關指令中的隔離範圍的AngularJS（及相關）文檔和其他stackoverflow問題之後，我仍然有點困惑。爲什麼我不能在父範圍和指令隔離範圍之間進行雙向綁定，其中父範圍屬性是對象而不是屬性？我應該使用scope.$parent以外的所需房產嗎？這似乎是錯誤的。在此先感謝您的幫助。如何從父範圍繼承複雜的屬性到我的指令的隔離範圍

相關小提琴是here。

HTML：

<div ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
     <div my-directive>{{test.name}}</div> 
    </div> 
</div>

的JavaScript：

var myApp = angular.module('myApp', []); 

myApp.controller('myCtrl', function ($scope) { 
    $scope.test = {name:"name", value:"value"}; 
}); 

myApp.directive("myDirective", function() { 
    return { 
     replace: true, 
     restrict: 'A', 
     scope: {test: '='}, 
     template: '<div class="parent"><div>This is the parent Div.</div><div>Value={{test}}</div></div>', 
     link: function (scope, element, attrs) { 
      console.log("scope.test=["+scope.test +"]"); 
      console.log("scope.$parent.test=["+scope.$parent.test.name+"]"); 
     } 
    }; 
});

來源

2013-03-20 KSev

對於使用分離範圍的指令，屬性用於指定父作用域屬性的指令隔離子範圍將需要訪問。 '='提供雙向綁定。 '@'提供「單向字符串」。 '&'提供單向表達式。

爲了讓你的指令（雙向綁定）訪問父範圍對象屬性test，使用HTML：

<div my-directive test="test"></div>

這可能是更有益的使用不同的名稱：

<div my-directive some-obj-prop="test"></div>

然後在你的指令中：

scope: { localDirProp: '=someObjProp'}, 
template: '<div ...>Value={{localDirProp}}...',

隔離範圍不會從父範圍原型繼承，因此它無權訪問任何父範圍的屬性（除非使用'@'或'='或'&'）。使用$parent是仍然訪問父範圍的一種方式，但不是通過原型繼承。 Angular在範圍上創建了這個特殊的$parent屬性。通常（即最佳實踐），不應使用它。

來源

2013-03-21 00:12:08

感謝馬克！鑑於我試圖綁定的屬性是一個對象，使用HTML屬性（只能是字符串）引用它並不直觀。另外，由於我只是簡單地將HTML用作我希望我的指令所在的位置的持有者，所以使用它來定義我希望在範圍之間同步的屬性似乎並不合理。無論如何，我想我現在明白了。我很感謝你的回答。雖然AngularJS文檔有一些優點，但在解釋開發人員制定代碼決策所需的中級概念時，可以看到有待改進的餘地。 – KSev 2013-03-21 16:21:20

是的，我同意HTML屬性的值是（範圍）對象的名稱是相當奇怪的。 – 2013-03-21 16:25:19

對於那些可能會發現這個問題很有幫助的人來說，這裏是更新的，工作小提琴與馬克的建議實施：http://jsfiddle.net/ksevksev/PWdYZ/ – KSev 2013-03-21 16:30:41

如何從父範圍繼承複雜的屬性到我的指令的隔離範圍

回答

相關問題