AngularJS：指令與模板引用指令和數據綁定

Question

我正在使用AngularJS 1.5.3。我有一個用例，我從另一個指令中調用一個指令。換句話說，指令是鏈接的。我希望我的外部指令的範圍變量根據內部指令的結果進行更新。我在這裏創建了一個JSFiddle：http://jsfiddle.net/gstanek/6voytwuc/30/，它顯示了我所嘗試的內容。

相同的代碼在這裏重現：

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <span first-layer-directive first-layer-info="'fist layer text'"></span> 
</div> 

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

myApp.controller('MyCtrl', function($scope) { 

}); 

myApp.directive('firstLayerDirective', function() { 
    return { 
     scope: { 
      firstLayerInfo: '=' 
     }, 
     template: "<div><span>1st Layer Displayed info='{{firstLayerDisplay}}'</span></div>" + 
     "<div>" + 
     "<span second-layer-directive second-layer-info=\"'second layer text'\" info=\"info\">Second layer displayed info='{{secondLayerDisplay}}'</span></div>" + "<span>Info returned from 2nd layer: {{info}}</span>", 
     link: function (scope, element, attrs) { 
      scope.firstLayerDisplay = scope.firstLayerInfo; 
      scope.info = ''; 
     } 
    }; 
}); 

myApp.directive('secondLayerDirective', function() { 
    return { 
     scope: { 
      secondLayerInfo: '=', 
      info: '=' 
     }, 
     template: "<div><span>2nd Layer Displayed info='{{secondLayerDisplay}}'</span></div>", 
     link: function (scope, element, attrs) { 
      scope.secondLayerDisplay = scope.secondLayerInfo + ' plus more info'; 
      scope.info='info generated in 2nd layer'; 
     } 
    }; 
}); 

運行此的jsfiddle的輸出是：

1st Layer Displayed info='fist layer text' 
2nd Layer Displayed info='second layer text plus more info' 
Info returned from 2nd layer: 

相反，我想最後一行顯示如下： Info returned from 2nd layer: info generated in 2nd layer

如何將數據從內部指令傳遞迴外部直接並確保使用新值更新外部指令？

Answer 1

您可以從外部指令訪問內部指令的範圍。所以只需從firstLayerDirective的鏈接功能中刪除。

scope.info = ''; 

如果我明白你的問題是正確的，你將通過這樣做得到你的結果。

Answer 2

UPDATE 正如OP指出的那樣，原始解決方案「有效」，但實際上並不正確。我相信這種情況發生的原因是因爲內嵌模板與鏈接函數一起編譯的方式。如果您更改鏈接功能以使用預鏈接，它似乎工作。

link: { 
      pre: function (scope, element, attrs) { 
      scope.firstLayerDisplay = scope.firstLayerInfo; 
      scope.info = ''; 
      } 
     } 

---

原來的答案

爲了解決這個問題，你需要使用所謂的 「點號」（見這裏解釋http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html）。

如果你改變你的父母的指令看起來像下面的代碼，它應該解決你看到的問題......

myApp.directive('firstLayerDirective', function() { 
    return { 
     scope: { 
      firstLayerInfo: '=' 
     }, 
     template: "<div><span>1st Layer Displayed info='{{firstLayerDisplay}}'</span></div>" + 
     "<div>" + 
     "<span second-layer-directive second-layer-info=\"'second layer text'\" info=\"info.text\">Second layer displayed info='{{secondLayerDisplay}}'</span></div>" + "<span>Info returned from 2nd layer: {{info}}</span>", 
     link: function (scope, element, attrs) { 
      scope.firstLayerDisplay = scope.firstLayerInfo; 
      scope.info.text = ''; 
     } 
    }; 
}); 

我做了改變「scope.info =‘’」，以唯一的變化「scope.info.text =''」然後將「info.text」傳遞給html中的子指令。

讓我知道如果您有任何問題。

Answer 3

你需要的是ng-transclude。

我做給你一個例子，看看this

相同的代碼在這裏重現：

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.foo = "I'm foo!"; 
 
    $scope.lines = []; 
 
    $scope.addLine = function() { 
 
     $scope.lines.push($scope.lines.length); 
 
    }; 
 
}); 
 

 
myApp.directive('firstLayerDirective', function() { 
 
    return { 
 
     scope: { 
 
      firstLayerInfo: '=' 
 
     }, 
 
     transclude:true, 
 
     template: "<div><span>1st Layer Displayed info='{{firstLayerDisplay}}'</span></div><div ng-transclude></div>", 
 
     link: function (scope, element, attrs) { 
 
      scope.firstLayerDisplay = scope.firstLayerInfo; 
 
      scope.info = ''; 
 
     } 
 
    }; 
 
}); 
 

 
myApp.directive('secondLayerDirective', function() { 
 
    return { 
 
     scope: { 
 
      secondLayerInfo: '=', 
 
      info: '=' 
 
     }, 
 
     template: "<div><span>2nd Layer Displayed info='{{secondLayerDisplay}}'</span></div>", 
 
     link: function (scope, element, attrs) { 
 
      scope.secondLayerDisplay = scope.secondLayerInfo + ' plus more info'; 
 
      scope.info='info generated in 2nd layer'; 
 
     } 
 
    }; 
 
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <button ng-click="addLine()">Add a line</button> 
 
    <div ng-repeat="line in lines"> 
 
     I'm a new line. {{foo}} 
 
    </div> 
 
    <span first-layer-directive first-layer-info="'fist layer text'"> 
 
     <div><span second-layer-directive second-layer-info="'second layer text'" info="info">Second layer displayed info='{{secondLayerDisplay}}'</span></div><span>Info returned from 2nd layer: {{info}}</span> 
 
    </span> 
 
</div>