获得变量后的角度指令加载

时间:2015-01-09 09:25:46

标签: javascript angularjs angularjs-directive angularjs-scope

我有一个从服务加载数据的角度指令, 但 它使用一个变量来加载数据,该变量来自一个已加载的控制器,也来自一个服务。

代码: 指令:

app.directive("posts", ['Posts', function(Posts) {
return {
    restrict: 'E',

    template: '' +
    '<div ng-repeat="post in posts"></div>',
    scope: {
        showLoading: '&',
        hideLoading: '&',
        spot: '@'
    },

    controller: ['$scope', function ($scope) {

    }],

    link: function(scope, element, attrs) {
         $scope.load = function () {
            Posts.loadPostsBySpot(scope.spot)
        };
    }
};
}]);

控制器

app.controller('spotPageController', ['$scope', 'Spots', function ($scope, $Spots) {

    doit = function () {
        Spots.getSpot($)
            .success(function (data) {
                $scope.spotId = data.data;
                console.log($scope.spot);
            }).error(function (data) {
                console.log('error');
            });
    };
 }]);

html里面

<posts spot="{{spotId}}" showLoading="showLoading()" hideLoading="hideLoading()"></posts>

但是当加载指令时,“spot”尚未设置, 那么如何在设置光点后才能加载指令。

1 个答案:

答案 0 :(得分:3)

使用ng-if

<posts ng-if="spotId" spot="{{spotId}}" showLoading="showLoading()" hideLoading="hideLoading()"></posts>

此元素仅在初始化spotId后呈现。因此,在此之前不会调用您的指令。

如果要在指令中封装此行为,则应注意scopeId的更改。请参阅fiddle