Angularjs - значение Scope не применяется в шаблоне

Question

Я использовал область действия директивы в шаблоне директивы. Я пытался получить HTML из кэша шаблонов, который был сохранен ранее.

Но текущая область действия директивы не применяется к директиве. Я не знаю, что будет причиной.

Я попытался скомпилировать шаблон и получить значение. Но не применяется.

contentString = $templateCache.get('template/MyTemplate')

var div = document.createElement("div");
div = angular.element(div).html(contentString);
var s = $compile(div.contents())($scope);

шаблон /MyTemplate будет следующим

<div>
   {{obj.value}}
</div>

Директивная сфера вроде следующего,

 link: function ($scope, $element, $attributes) {
    $scope.obj.value="This is my test"
 }

Я получил вывод как

<div class="ng-scope">
    {{obj.value}}
</div>

В чем будет проблема?

Answer 1

Проверьте этот пример, который использует пользовательскую директиву с изолированной областью действия. Я надеюсь, что приведенные ниже примеры помогут вам.

angular
  .module('demo', [])
  .directive('hello', hello);
  
  hello.$inject = ['$templateCache', '$compile'];
  
  function hello($templateCache, $compile) {
    var directive = {
      scope: {
      },
      link: linkFunc
    };
    
    return directive;
    
    function linkFunc(scope, element, attrs, ngModelCtrl) {
      scope.obj = {
        value: 'Hello, World!'
      };
      
      var template = $templateCache.get('templateId.html');
      element.html(template);
      $compile(element.contents())(scope);
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
  <hello></hello>
  <script type="text/ng-template" id="templateId.html">
    <div>
      {{obj.value}}
    </div>
  </script>
</div>

Другой пример использования псевдонима контроллера, т.е. controller as с директивой, чтобы быть в соответствии с использованием controller as с парами вида и контроллера

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .directive('hello', hello);
  
  function DefaultController() {
    var vm = this;
    vm.message = 'Hello, World!';
  }
  
  hello.$inject = ['$templateCache', '$compile'];
  
  function hello($templateCache, $compile) {
    var directive = {
      link: linkFunc,
      scope: {
        message: '='
      },
      controller: HelloController,
      controllerAs: 'vm',
      bindToController: true
    };
    
    return directive;
    
    function linkFunc(scope, element, attrs, ngModelCtrl) {
      var template = $templateCache.get('templateId.html');
      element.html(template);
      $compile(element.contents())(scope);
    }
  }
  
  function HelloController() {
    var vm = this;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <hello message="ctrl.message"></hello>
    <script type="text/ng-template" id="templateId.html">
     <p>{{vm.message}}</p>
   </script>
  </div>
</div>