Question

我有一个指令，我将tabInfo绑定到tabdata，这是一个数组。

angular.module('widgets')
  .directive('tabs', function() {
    return {
        restrict: 'E',
        require: 'info',
        transclude: true,
        scope: {},
        controllerAs: 'tabs',
        bindToController: {
            tabInfo: '=tabdata'
        },
        templateUrl: 'Template.html',
        link: function(scope, element, attrs, tabs) {
            scope.$watch('tabs.tabInfo', function() {
                tabs.populateDataProvider();
            }, true);
        },
        controller: ['$filter', '$state', function($filter, $state) {
        }]
    };
});

我需要关注＆＃34; tabInfo＆＃34;任何更改并填充一些数据。但是，我的手表根本没有被召唤。这里有什么问题吗，就像我引用tabs.tabInfo一样？

Answer 1

更好的解决方案是将ng-if与指令一起使用，以确保仅在有数据填充时才呈现指令。这避免了在指令中使用观察者的需要。

所以你可以使用，

<tabs ng-if="$ctrl.tableData.length" tab-info="$ctrl.tableData"></tabs>

对于上面的问题，您需要将this绑定到变量tabs 让它工作。

var tabs = this;

编辑：

您的代码也有更正。它应该是，

angular.module('widgets')
  .directive('tabs', function() {
    return {
        restrict: 'E',
        require: 'info',
        transclude: true,
        bindToController: true,
        controllerAs: 'tabs',
        scope: {
            tabInfo: '=tabdata'
        },
        templateUrl: 'Template.html',
        link: function(scope, element, attrs, tabs) {
            scope.$watch('tabs.tabInfo', function() {
                tabs.populateDataProvider();
            }, true);
        },
        controller: ['$filter', '$state', function($filter, $state) {
        }]
    };
});

角度范围。$ watch不工作

1 个答案: