如何transclude與隔離範圍工作

我已經寫了這段代碼。如何transclude與隔離範圍工作

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.hobby='AngularJS'; 
 
}); 
 

 
app.directive('outputText',function(){ 
 
    return { 
 
    transclude: true, 
 
    scope: {}, 
 
    template: '<div ng-transclude></div>' 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <div output-text> 
 
    <p>Hello {{name}}</p> 
 
    </div> 
 
    <div output-text> 
 
    <p>I love {{hobby}}!!</p> 
 
    </div> 
 
    </body> 
 

 
</html>

正如你可以在上面看到我使用我的指令，那裏是在隔離範圍沒有名字的財產隔離範圍。但是，它如何訪問父級作用域名稱屬性，因爲我甚至沒有使用子作用域或我缺少一些東西。

來源

2014-09-30 user3427540

無論您是否使用隔離元素，轉義元素始終綁定到父作用域。

這就是documentation on transclude指出

transclude

編譯元素的內容，並將其提供給指令。通常與ngTransclude一起使用。 transclusion的優點在於，鏈接功能接收預先綁定到正確範圍的功能的功能。在典型的設置中，小組件創建一個隔離範圍，但該隔離不是孩子，而是隔離範圍的兄弟。這使得小部件具有私有狀態成爲可能，並且將該包含的綁定綁定到父（預分離）範圍的。

來源

2014-09-30 06:50:43 Chandermani

所以這意味着trancluded元素總是可以訪問父範圍？ – user3427540 2014-09-30 06:56:28

是的，這是真的。如果您希望html成爲孤立作用域的一部分，請在指令模板中定義它。 – Chandermani 2014-09-30 06:59:56

'如果您希望html成爲孤立作用域的一部分，請在指令模板中定義它'您能否請我解釋一下如何解釋？ – user3427540 2014-09-30 07:03:43

每條指令都被編譯並鏈接到一個作用域。 Transcluded內容總是鏈接到該指令的直接外部作用域（儘管這可以通過使用transclude函數 - 第5個參數鏈接到您的鏈接函數來覆蓋）。在你的情況下，它是MainCtrl控制器的作用域。

如果您的指令位於ng-repeat（或創建子範圍的另一個指令）中，則transcluded內容將與ng-repeat的子範圍鏈接。

來源

2014-09-30 06:59:59 pixelbits

如何transclude與隔離範圍工作

回答

相關問題