外部AngularJS指令不能正確地構建內部指令

使用AngularJS 1.0.8，我試圖創建一些可重用的指令來創建一種情況，在這種情況下，Web開發人員可以編寫一個「頂級」屬性，而這個指令又有一個包含其他指令的模板，它們本身可能包含其他指令等。外部AngularJS指令不能正確地構建內部指令

我遇到的問題是讓「內部」模板意識到頂級屬性。我認爲這將是一個普遍的問題，但從我的研究來看，沒有人看到其他人提出這個問題。

我創造了這個Plunker，藉以說明問題：

<!DOCTYPE html> 
<html ng-app="outerInnerDirectivesApp"> 
<head> 
    <title>Outer/Inner Directives</title> 
</head> 
<body> 
<div>Single level directive follows:</div> 
<single-level-directive single-level-id="single123"></single-level-directive> 
<div>Outer/inner directive follows (Expecting "outer123"):</div> 
<outer-directive outer-id="outer123"></outer-directive> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
<script src="app.js"></script> 
<script src="directives.js"></script> 
</body> 
</html>

在Plunker，

單級指令的作品，是的，我想，以顯示數據的標準方法。
外部指令和內部指令不起作用。

我希望這些發生是

（I）outerDirective編譯/鏈接生成HTML

<inner-directive inner-id="outer123"></inner-directive>

然後

（II）innerDirective編譯/鏈接製作html

<div>outer123</div>

但在步驟（ii）我得到

<inner-directive inner-id="" class="ng-isolate-scope ng-scope"> 
    <div class="ng-binding"></div> 
</inner-directive>

所以由innerDirective產生的空div。

事實上，如果我改變外template.html是

<div>{{outerId}}<div>

則該值顯示正確，所以它看起來像scope.outerId可在正確的點，但角度不開心關於我試圖以我的方式使用它。

這是一個合理的事情，期待Angular做什麼？如果是這樣，我錯過了什麼？如果沒有，那麼您認爲從簡單的指令集合構建更復雜的屏幕是一種明智的替代方法？

來源

2013-10-31 westwell

如果你要設計具有隔離範圍的指令，我會建議使用隔離的範圍來定義你想使用的屬性類型：

outerInnerApp.directive("outerDirective", function() { 
    return { 
    restrict: "E", 
    scope: { 
     outerId: '@' 
    }, 
    link: function(scope, element, attrs) { 

    }, 
    templateUrl: "outer-template.html" 
    }; 
}); 
outerInnerApp.directive("innerDirective", function() { 
    return { 
    restrict: "E", 
    scope: { 
     innerId: '=' 
    }, 
    link: function(scope, element, attrs) { 

    }, 
    templateUrl: "inner-template.html" 
    }; 
});

這裏是一個working plunker。

您的外部指令使用的是屬性中定義的值。因此，要將值傳遞到隔離範圍，我們可以使用@。內部作用域然後通過綁定一個變量。因此，我們可以使用=來設置綁定屬性。

來源

2013-10-31 21:03:23

謝謝達文。這正是我需要的。事實上，你的回答在我的理解中表現出很大的差距，這對填寫非常有用！ – westwell

爲了別人的利益，我會在下面解釋我原來的知識差距（糾正我，如果我錯了，任何人）。 outerId：'@'位很好。它正在尋找HTML中的屬性... outer-id =「value」...或... outer-id = {{interpolatedValue}} 但是，我不理解的是， innerId ：'=' 增加了一個間接級別。它正在尋找HTML for ... inner-id ='propertyName'，然後查找$ parentScope.propertyName的值以達到實際值。 – westwell

對此有更多的想法。使用AngularJS多一點，我不確定我想綁定到範圍（使用「=」）。其實，我可以得到原始Plunkr通過使這些變化的工作：

outerInnerApp.directive("outerDirective", function() { 
    return { 
     restrict: "E", 
     scope: { 
     //add outerId here 
     outerId: "@" 
     }, 
    link: function(scope, element, attrs) { 
     //remove scope assignment here 
     //scope.outerId = attrs.outerId; 
    }, 
    templateUrl: "outer-template.html" 
    }; 
}); 
outerInnerApp.directive("innerDirective", function() { 
    return { 
    restrict: "E", 
    scope: { 
     //add innerId here 
     innerId: "@" 
    }, 
    link: function(scope, element, attrs) { 
     //remove scope assignment here 
     //scope.innerId = attrs.innerId; 
    }, 
    templateUrl: "inner-template.html" 
    }; 
});

我不此刻明白什麼是爲什麼會有之間，也就是說不同，

innerId:"@"

和設置鏈接功能中示波器的值

link: function(scope, element, attrs) { 
    scope.innerId = attrs.innerId; 
}

當我找出它的行爲不同的原因後，我會回覆。

來源

2013-12-13 23:13:47 westwell

您可能希望將其作爲自己的問題發佈，而不是作爲已回答並接受的問題的答案。 –

外部AngularJS指令不能正確地構建內部指令

回答

相關問題