角度指令范围 - 模板包括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>