使用父控制器的指令中的异步范围属性

Question

仍然让我的头脑转向angularJs，取得进展，但我不确定这个问题是否与指令相关的误解或更广泛的误解。

在我的角度应用程序中，一个指令继承自父指令控制器（我的应用程序在现实中并非如此，但出于简单的jsfiddle的目的）。父控制器执行异步，我希望子模板相应地更新。

因此在子控制器完成编译/链接过程后设置属性。 此属性已绑定到子模板，因此在更新时为什么模板不会更新？或者我需要做些什么才能实现这一目标？

正如我所提到的，代码被大大简化了（异步位实际上是一个带有$ http调用的服务，模板要复杂得多，我需要在转发器中使用这个属性等）但这实质上就是我的应用程序代码看起来像现在。

fiddle here

<div ng-app="myApp">
    <dashboard>
        <published></published>
    </dashboard>  
</div>

我的角度javascript

var app = angular.module('myApp', []);

app.directive('dashboard', function () {
    return {
        restrict: 'E',
        controller: function ($scope) {
            $scope.foo = '';

            //this is actually to simulate an $http request
            $scope.get = function () {
                setTimeout(function() {
                    $scope.foo = "hello";
                }, 1000);
            };

            $scope.get();

            $scope.bar="world";
        }
    };
})
.directive('published', function ($compile) {
    return {
        restrict: 'E',
        require: '^dashboard',
        template : '<span>{{foo}} {{bar}}</span>',
        link: function ($scope, element, attrs) {

            console.log('scope', $scope); //can see foo in console so inheriting as expected
            console.log('scope.foo', $scope.foo); //not there so obviously because of async
        }
    };
});

Answer 1

这是一个小提琴：http://jsfiddle.net/967zF/

setTimeout不会触发$ digest，而是使用$timeout：

app.directive('dashboard', function () {
    return {
        restrict: 'E',
        controller: function ($scope,$timeout) {
            $scope.foo = '';

            $scope.get = function () {
                $timeout(function() {                    
                    $scope.foo = "hello";
                }, 1000);
            };

            $scope.get();

            $scope.bar="world";
        }
    };
})

---

小提琴：http://jsfiddle.net/MP8DR/

或者，您也可以触发$ digest，如下所示：

setTimeout(function() {
  $scope.$apply(function(){
    $scope.foo = "hello";
  });
}, 1000);

Answer 2

如果你改变你的小提琴并注入$timeout并使用它而不是setTimeout它将起作用。 这个

app.directive('dashboard', function ($timeout) {

和

 $timeout(function() {
     $scope.foo = "hello";
 }, 1000);