如何正确使用隔离范围属性？

我有一个指令，它是从一个页面控制器调用的，其属性item传递给它，例如， <my-directive item="myItem"></my-directive>，包含id。

下面的代码将不起作用，因为它似乎$scope.item未被定义在控制器中..就像我太快使用它。我如何确定在我想要使用它时实际设置了它？

app.directive('myDirective', [function() { 
return { 
    restrict: 'E', 
    templateUrl: 'template.html', 
    scope: { 
     item: "=" 
    }, 
    controller: ['$scope', 'ExtendedItemFactory', function($scope, ExtendedItemFactory) { 
     this.extendedInfo = ExtendedItemFactory.get({ id: $scope.item.id }); 
    }], 
    controllerAs: 'MyDirectiveCtrl' 
}; 
}]);

来源

2015-06-09 Andreas

你可以使用你的$watch指令，将在改变观赏价值&会火，你想里面的代码。

代码

app.directive('myDirective', [function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'template.html', 
     scope: { 
      item: "=" 
     }, 
     controller: ['$scope', 'ExtendedItemFactory', function($scope, ExtendedItemFactory) { 
      this.extendedInfo = ExtendedItemFactory.get({ 
       id: $scope.item.id 
      }); 
      $scope.$watch('item', function(newVal, oldVal) { 
       if (newVal && newVal != oldVal) 
        this.extendedInfo = ExtendedItemFactory.get({ 
         id: $scope.item.id 
        }); 
      }, true).bind(this); 
     }], 
     controllerAs: 'MyDirectiveCtrl' 
    }; 
}]);

来源

2015-06-09 13:47:50

使用'$ watch'确实工作！ – Andreas

我不得不说，角度不提供更简单的本地解决方案是很奇怪的。 – Andreas

@Andreas是的，它会在没有'.bind（this）'的情况下工作，因为我们正在直接访问isolatated scope变量..如果我们想使用链接的范围变量到指令控制器，那么只有我们会使用'.bind（this） '..如果它确实帮助了你，那就投票赞成..那么.. –

您使用controllerAs，所以你不需要在这种情况下注入$范围。

我想你的指令定义更改为以下，注意使用bindToController，这将确保您的隔离范围值，填充和可用的控制器上：

app.directive('myDirective', [function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'template.html', 
     scope: { 
      item: "=" 
     }, 
     controller: ['ExtendedItemFactory', function(ExtendedItemFactory) { 
      this.extendedInfo = ExtendedItemFactory.get({ id: this.item.id }); 
     }], 
     controllerAs: 'MyDirectiveCtrl', 
     bindToController: true 
    }; 
}]);

来源

2015-06-09 13:49:37 natwallbank

这似乎不起作用，在试用你的代码时，'item'尚未在控制器中定义。 – Andreas

你能告诉你如何使用该指令吗？ – natwallbank

''其中'myItem'是页面控制器上的作用域变量。 – Andreas

相反初始化extendedInfo当指令加载你可以创建getter函数，根据需要检索它。

this.getExtendedInfo = function(){ 
    return ExtendedItemFactory.get({ id: $scope.item.id }); 
}

或者阻止您的指令加载，直到item准备

<div ng-if="ctrl.item"> 
    <my-directive item="ctrl.item"></my-directive> 
</div>

来源

2015-06-09 13:53:50 rob

我必须直接在加载时加载信息，所以你的第一个建议不起作用。你的第二个建议是一个有趣的方法，但将逻辑置于指令本身之外感觉不对...... – Andreas

如何正确使用隔离范围属性？

回答

相关问题