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

检查此示例，该示例使用具有隔离范围的自定义指令。我希望以下示例对您有所帮助。

＆＃13;

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);
    }
  }

＆＃13;

<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>

＆＃13;

使用控制器别名语法的另一个示例，即controller as，其指令与使用视图和控制器配对的controller as一致

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

Angularjs - 范围值未应用于模板中

1 个答案: