Question

可以使用一些帮助来理解这里发生的事情......我需要在服务中创建一个指令并将其添加到DOM中...检查！但是现在当我尝试访问范围内的属性时，在指令/模板内部我什么也得不到。修正，模板内部{{property}}本身可以使用，但不是<h1>{{property}}</h1> ..所以换句话说，当我向模板添加HTML时，它会停止工作。无论如何，我创建了这个plunkr以试图理解。

应用程式：

  angular.module('app', [])
    .run(['fooService', function(fooService) {
      fooService.foo('Hello World!');
    }]);

服务：

  function fooService($rootScope, $compile, $animate) {

    function createDirective(message) {
      var newFoo = {
        scope: $rootScope.$new()
      };

      var target = angular.element(document.querySelector('#bar'));
      var elem = angular.element(document.createElement('foo'));

      newFoo.scope.message = message;

      newFoo.elem = $compile(elem)(newFoo.scope);
      $animate.enter(newFoo.elem, target).then(function() {});
    }


    function foo(message, overrides) {
      return createDirective(message);
    }

    return {
      foo: foo
    };
  }

  fooService.$inject = ['$rootScope', '$compile', '$animate'];

  angular.module('app')
    .factory('fooService', fooService);

指令：

  function fooDirective() {
    return {
      restrict: 'AE',
      templateUrl: 'foo.html',
      link: function(scope) {
        console.log(scope.message);
      }
    }
  }

  angular.module('app')
    .directive('foo', fooDirective);

模板 - 显示：＆＃34;指令消息：＆＃34;

<h1>
  Directive message: {{message}}
</h1>

工作模板-displays：＆＃34;指令信息：Hello World！＆＃34;

Directive message: {{message}}

Angular的新手仍然请原谅我，如果这不是应该怎么做但有人可以解释一下发生了什么？先谢谢！

Answer 1

您的模板需要使用范围作为上下文进行编译。将您的指令替换为：

function fooDirective($compile, $templateRequest) {
    return {
      restrict: 'AE',
      link: function(scope, el) {
        console.log(scope.message);


        $templateRequest("foo.html").then(function(html){
          var template = angular.element(html);
          el.append(template);
          $compile(template)(scope);
        });
      }
    }
  }

访问指令内部的链接/范围的问题

1 个答案: