在指令内部访问 linking/scope 时出现问题

Question

可以使用一些帮助来理解这里发生的事情...我需要从服务中创建一个指令并将其添加到 DOM...检查！但是现在当我尝试访问作用域上的属性时，在 directive/template 内部我什么也得不到。更正，模板内部的 {{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);

模板 - 显示："Directive message:"

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

工作模板-显示："Directive message: Hello World!"

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

在指令内部访问 linking/scope 时出现问题

Issues accessing linking/scope inside of a directive

javascript

angularjs

angularjs-directive

angularjs-scope

angular-services