Question

我有一个指令：

app.directive('bhHugeHeader',[function(){

    var link = function(scope, element, attrs, ctrl) {
        console.dir(ctrl);
        console.dir(ctrl.heroImgSrc);

        element.css({
            'min-height': '100%',
            'background-image': ctrl.heroImgSrc
        })
    }

    return {
        templateUrl: 'templates/hugeheader.html',
        controller: 'hugeHeaderController',
        controllerAs: 'hugeHeaderCtrl',
        restrict: 'E',
        replace: true,
        link: link
    }
}]);

查看这两个console.dir调用 - 第一个返回一个对象，当我在浏览器中查询时，我可以看到有一个属性heroImgSrc带有一个值（这是一个图像的url）但是第二个console.dir返回undefined。

我做错了什么？我想我的方法存在缺陷，我需要以不同的方式对待这个问题，但对我而言，这似乎是合理的......直到它没有。

Answer 1

事实证明，这是数据何时可用的问题。鉴于我们在这里讨论的是对象，我在Chrome开发者工具中看到的数据只显示了当前状态。

链接功能运行时数据不可用，因此您需要在下面添加监视更新的链接功能：

var link = function(scope, element, attrs, ctrl) {

        scope.$watch(function() {return scope.hugeHeaderCtrl.heroImgSrc},function(newValue){
            if (newValue) {
                console.log(scope.hugeHeaderCtrl.heroImgSrc);
                element.css({
                    'min-height': '100%',
                    'background-image': 'url(' + scope.hugeHeaderCtrl.heroImgSrc + ')',
                    'background-size': 'cover'
                });
            }
        }); 
    }

Answer 2

请看这个博客：http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers

如果使用angular 1.3+，则必须将bindToController定义为true。

无法访问Controller

2 个答案: