Блог

Главная - Вопросы по программированию - Angularjs — значение области не применяется в шаблоне

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

#angularjs #angularjs-directive #angularjs-scope #angularjs-compile

#angularjs #angularjs-директива #angularjs-scope #angularjs-компиляция

Вопрос:

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

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

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

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

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

template / MyTemplate будет следующим

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

Область действия директивы выглядит следующим образом,

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

Я получил вывод, подобный

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

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

Ответ №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 с парами view и controller

 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>
Метки: