Question

我在同一页面上有两个指令，但是在不同的元素上。这样的事情：

<div directive-one>
    <div directive-two></div>
</div>

在directiveOne中，我创建了一些变量（比如说$scope.pageConfig.variable）。我想使用directiveTwo来使用这个变量。

问题 - directiveOne并不总是在directiveTwo之前加载。

问题是 - 有没有办法确保在directiveTwo之前加载directiveOne，以便变量可用于directiveTwo？

谢谢：）

更新：我发现答案应该是在指令中使用控制器，如下所示：

return {
controller: function($scope){ $scope.variable = variable; },
link : ...
}

问题是我以这种方式使用它会出现错误[$ injector：unpr]。这应该解决我的问题吗？知道为什么这会给我造成错误吗？

Answer 1

如何在directiveB中要求directiveA：

var myApp = angular.module('myapp', [])
.run(function(){

});

myApp.directive('fooDirective', function() {
    return {
      restrict: 'A',
      controller: function(){
        this.pageConfig = {
          someVaraible: 'value from foo'
        };
      }
    }
  });

  myApp.directive('barDirective', function() {
    return {
      restrict: 'A',
      require: '^fooDirective',
      link: function(scope, element, attr, fooDirectiveController){
        console.log(fooDirectiveController.pageConfig);
      }
    }
  });

此处有一个Plunk以及更多关于扩展指令的information，此处some more info

Answer 2

如果您想在子指令之前在父指令中运行一些代码，可以将代码放在preLink函数中。可以像这样指定preLink函数：

return {
  link: {
    pre: function preLink(scope, element, attrs) {
      // put your code here
      // code in here of parent will be executed before child's (top down).
    },
    post: function postLink(scope, element, attrs) {
      // code in here of parent will be executed after child's (bottom up).
    }
  }
};

Answer 3

我找到了答案。一种解决方案可以是米龙的解决方案。问题是，它适用于等待子指令的父指令（关于DOM树） -

您可以在父DOM元素上或在同一DOM元素
上需要它

另一个对我有用的解决方案是使用指令控制器。 This blog post解释得非常好。简而言之，控制器按照正在读取dom树的顺序激活，同时正在读取链接＆＃34;在回来的路上＆＃34;。

我的问题是你必须接受$ scope（如在controller：function（$ scope）而不是controller：function（scope）），以便控制器实际接受范围。不直观，但这是怎么回事：）

Answer 4

您可以随时在变量上设置监视，如果对变量进行更改则会更新。

这是一个简单的例子，

App.directive('myDirective', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      link: function ($scope, element, attrs) 
      {
          $scope.test = "testme"
      } 
  };
});


App.directive('mySecondDirective', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      link: function ($scope, element, attrs) 
      {
          $scope.$watch('test', function() {
                       alert('hey, myVar has changed!');
       });
      } 
  };
});

作为替代方案，您可以在第二个指令

中设置超时

$scope.test = "Waiting to update";


setTimeout(function () {
    $scope.$apply(function () {
          console.log($scope.test);
    });
}, 2000);

希望这会对你有帮助！

Angularjs：指令加载顺序

4 个答案: