Question

我尝试使用$broadcast和$on将数据从控制器传递到指令。

当我刷新页面时，数据仅出现在指令的HTML模板上。当我route到带有嵌入指令的控制器模板时，它不会出现。

奇怪的是，我在控制台日志时似乎收到了数据。我尝试过使用$timeout和angular.element(document).ready

控制器：

$http.getDashboardData(...).success(function(res) { 
      populateResults(res);
      ...
}

function populateResults (data) {
    $rootScope.safeApply(function () {
        $rootScope.$broadcast('show-results', data);
    });
}

指令：

.directive('results',['$rootScope', function ($rootScope) {
    return {
        restrict: 'AE',
        scope: {},
        transclude: true,
        templateUrl: '/html/directives/results.html',
        link: function(scope, elem, attr){
        ...

$rootScope.$on('show-results', function(event, args) {
    angular.element(document).ready(function () {
        scope.init(args);
    });
});

scope.init = function (args) {

    console.log('ARGS', args); //Has data

    scope.questions = args;
};

带有嵌入式results指令的控制器页面：

<div class="myPage">
    <results></results>
</div>

指令HTML：

<div>
    QUESTIONS: {{questions}} : //Empty array
</div>

控制台日志：您可以看到它有数据：

路由序列：

   .config:
        ...
        state('dashboard', {
            url : '/dashboard',
            templateUrl: '/html/pages/dashboard.html',
            controller: 'dashboardCtrl',
            resolve : {
                ProfileLoaded : function ($rootScope) {
                    return $rootScope.loadProfile();
                }
            }
        });

.run：如果用户刷新页面，则加载配置文件：

    $rootScope.loadProfile = function () {
        return Me.getProfile({user_id : Cookies.get('user_id')}).success(function (res) {
            $rootScope.me = res;
        }).error(function (err) {
            console.log('Error: ', err);
        });
    };

Answer 1

在你的指令链接函数中，尝试使用scope。$ on而不是$ rootScope。$ on，并直接使用scope.init而不使用document.ready

Angular $ broadcast仅在页面刷新时填充数据

1 个答案: