Угловая область действия - шаблон включает vs inline transclude

Question

У меня есть угловая директива для отображения модального окна. Он может принимать содержимое либо внутри линии между тегами HTML, либо указывать на шаблон. При использовании этой директивы я, кажется, имею нормальный доступ к $scope, когда я использую преобразованную встроенную версию этой директивы, но когда я использую шаблон, я этого не делаю.

Что мне здесь не хватает? Я сделал меньшую типовую директиву, которая имеет такое же поведение.

Демонстрация: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

См. Демонстрационную версию ниже. Вы создали изолированную область действия в своей директиве, таким образом, ваша область директивы не такая же, как у контроллера $ scope. Но вы можете добавить также вещь в свою область действия, как в примере ниже.

Я надеюсь, что это поможет.

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>