Question

指令的代码

.directive('directive',function(){
  return {
    link:function(scope){
      scope.a1='ok'
      scope.b1='ok'
      scope.c1='ok'
    }
  }
})

控制器的代码：

.controller('controller',function($scope,$timeout){
  $scope.a=$scope.a1
  $timeout(function(){
    $scope.b=$scope.b1
  },100)
})

结果：

the scope.a1 ="" but needs to be 'ok' 
the scope.b = "ok" but needs to be 'ok' 
the scope.c1 = "ok" but needs to be 'ok'

演示： http://plnkr.co/edit/80XojfqrrKNubi17TeHq?p=preview

我希望 a 可以。但是当我声明它（$ scope.a == $ scope.a1）时，指令链接功能还没有运行。我该怎么办？

Answer 1

使其与$scope.b=$scope.b1类似，将$scope.a=$scope.a1置于$timeout函数内。

$timeout会将执行延迟到下一个周期。然后在编译子指令之后，完成赋值。

更新1

如果您不想使用$timeout，则需要应用一些异步机制来延迟赋值（直到子指令完成编译）。例如，$http.get(..).then()..等

或者，将赋值语句放在子指令中。无论如何，父和子使用完全相同的$scope对象。

第三，使用event系统发布/订阅事件和调用处理程序。

无论如何，您需要通过某种异步机制延迟父级中的赋值语句。

Answer 2

您可以使用 $ emit（）和 $ on（）。

$ emit（）通过范围层次结构向上调度事件。
$ on（）聆听特定事件

因此，在您的情况下，您可以执行以下操作：

<强>控制器

(function(){

function Controller($scope) {

  //Listen for change event sent by the directive
  $scope.$on('change', function(){
    //Set our $scope value
    $scope.a = $scope.a1;
    $scope.b = $scope.b1;
  })

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强>指令

(function(){

  function directive() {
    return {
      link:function(scope){
        scope.a1='ok';
        scope.b1='ok';
        scope.c1='ok';
        //Send change event
        scope.$emit('change');
      }
    };
  }

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

})();

<强> HTML

  <body ng-app='app' ng-controller="ctrl">
    <div directive>
      the scope.a1 ="{{a}}" but needs to be 'ok'
      <br>
      the scope.b = "{{b}}" but needs to be 'ok'
      <br>
      the scope.c1 = "{{c1}}" but needs to be 'ok'
    </div>
  </body>

您可以看到Working Plunker

如何使子链接指令功能在父控制器之前运行？

2 个答案:

更新1