在指令中访问链接/作用域的问题

Issues accessing linking/scope inside of a directive

本文关键字：作用域 问题 链接 指令 访问      更新时间：2023-09-26

可以使用一些帮助来理解这里发生了什么…我需要从服务中创建一个指令，并将其添加到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);

模板-显示:"指令信息:"

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

working template -显示:"指令消息:Hello World!"

Directive message: {{message}}

还是Angular新手，所以如果这不是应该怎么做，请原谅我，但是有人能解释一下发生了什么吗?提前感谢!

您的模板需要使用作用域作为上下文进行编译。将你的指令替换为:

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);
        });
      }
    }
  }
相关文章：