角度指令範圍 - 模板包括vs內聯transclude

Question

我有一個角度指令顯示模式窗口。它可以接受HTML內容之間內聯的內容，也可以指向模板。當我使用這個指令時，我似乎可以正常訪問$scope，但是當我使用這個指令的translluded內聯版本時，我沒有。

我在這裏錯過了什麼？我製作了一個具有相同行爲的小樣本指令。

演示：http://fiddle.jshell.net/ahezfaxj/2

內聯內容使用

<ang-test show="showBoolean"> 
    <p>Content here!</p> 
</ang-test> 

模板用法

<ang-test show="showBoolean" template="'myTemplate.html'"></ang-test> 

指令

app.directive("angTest", function() { 
    return { 
     template: function() { 
      return "<div class='test-container'>" + 
       " <div ng-if='show && template' ng-include='template'></div>" + 
       " <div ng-if='show && !template' ng-transclude></div>" + 
       "</div>"; 
     }, 
     restrict: "E", 
     replace: true, 
     transclude: true, 
     scope: { 
      template: "@", 
      show: "=" 
     }, 
     link: function ($scope, $element, attrs) { 
      if(value){ 
       $element[0].style.display="block"; 
      }else{ 
       $element[0].style.display="none"; 
      } 
     } 
    }; 
}); 

Answer 1

請參閱下面的演示。您在指令中創建了獨立的作用域，因此您的指令作用域與控制器$作用域不同。但是您可以將東西添加到您的指令範圍中，如下例所示。

我希望這會有所幫助。

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

 
app.controller("BaseCtrl", function ($scope) { 
 
    $scope.thing = "Hello!"; 
 
    $scope.showOne=false; 
 
    $scope.showTwo=false; 
 
}); 
 

 
app.directive("angTest", function() { 
 
    return { 
 
     template: function() { 
 
      return "<div class='test-container'>" + 
 
\t \t \t \t " <div ng-if='show && template' ng-include='template'></div>" + 
 
\t \t \t \t " <div ng-if='show && !template' ng-transclude></div>" + 
 
\t \t \t \t "</div>"; 
 
     }, 
 
     restrict: "E", 
 
     replace: true, 
 
     transclude: true, 
 
     scope: { 
 
      template: "@", 
 
      show: "=", 
 
      thing:'@' 
 
      
 
     }, 
 
     link: function ($scope, $element, attrs) { 
 
      //Show/hide when `show` changes 
 
      $scope.$watch("show", function (value) { 
 
       if(value){ 
 
        $element[0].style.display="block"; 
 
       }else{ 
 
        $element[0].style.display="none"; 
 
       } 
 
      }); 
 
     } 
 
    }; 
 
});

.test-container{ 
 
    padding:5px; 
 
    background: #EEE; 
 
} 
 
.transcluded { 
 
    color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="BaseCtrl"> 
 
     Outside Directive: <strong>{{thing}}</strong> 
 
     
 
     <hr /> 
 
     
 
     <button type="button" ng-click="showOne=!showOne">Toggle One</button> 
 
     <ang-test show="showOne"> 
 
      <p class="transcluded">Inside Included Directive: <strong>--> thing transcluded-->{{thing}}</strong></p> 
 
     </ang-test>  
 
     
 
     <hr /> 
 
     
 
     <script type="text/ng-template" id="myTemplate"> 
 
     <p>Inside Template Directive: <strong>thing from directive scope -->{{thing}}</strong></p> 
 
     </script> 
 
     
 
     <button type="button" ng-click="showTwo=!showTwo" >Toggle Two</button> 
 
     <ang-test show="showTwo" template="myTemplate" thing="{{thing}}"></ang-test> 
 
     
 
    </div> 
 
</div>