如何在AngularJS中将控制器数据传递给自定义指令？
我在AngularJS中有一个自定义指令，我希望将一个变量从我的控制器传递给它。
主计长：
angular.
module('orderOverview').
component('orderOverview', {
templateUrl: 'home-page/order-overview/order-overview.template.html',
controller: ['Orders',
function ControllerFunction(Orders) {
var self = this;
// Order Info
Orders.getOverview().$promise.then(function(data) {
self.LineItems = data;
});
// Order Info
}
]
});指令
angular.
module('myApp').
directive('gvInitializeOrderStatus', function() {
return {
scope: {
field: '@',
myData: '='
},
link: function(scope, element) {
console.log('field:', scope.field);
console.log('data:', scope.myData);
}
}
});HTML
<div gv-initialize-order-status field="InquiryDone" myData="$ctrl.LineItems">
<span class="tooltiptext">Inquiry</span>
</div>当我加载页面时，field日志很好，但是data是未定义的。
我已经尝试过很多种方法，但是如果它能让你知道我在想什么的话，它应该在我脑子里起作用。
在同一模板中的另一点上，我将ng-repeat数据传递给一个指令，但在本例中，我特别不想使用ng-repeat
ng-重复成功传递数据的HTML
<li ng-repeat="lineItem in $ctrl.LineItems">
<div class="status-circle"
ng-click="toggleCircle($event, lineItem, 'InquiryDone')"
field="InquiryDone" item="lineItem" gv-initialize-statuses>
<span class="tooltiptext">Inquiry</span>
</div>
</li>在我的另一个指令gv-initialize-statuses中，我在scope对象中使用了相同的概念，并且有类似于scope: { 'field': '=' }的东西，它工作得很好。
我怎么才能做到这一点而不使用ng-重复？
回答 5
Stack Overflow用户
发布于 2018-07-27 13:50:51
因此，当我在文档中阅读关于$compile的文章时，我找到了一个有用的答案。我意识到可以得到插值的属性值，所以我从scope对象中删除了myData字段，而是通过attrs对象访问了这个值，如下所示。
指令
angular.
module('myApp').
directive('gvInitializeOrderStatus', function() {
return {
scope: {
field: '@'
},
link: function(scope, element, attrs) {
console.log('field:', scope.field);
console.log('attrs:', attrs);
attrs.$observe('lineItems', function(value) {
console.log(value);
})
}
}
});HTML
<div gv-initialize-order-status field="InquiryDone" lineItems="{{$ctrl.LineItems}}">
<span class="tooltiptext">Inquiry</span>
</div>注意添加到lineItems属性的lineItems。attrs.$observe块还允许我获得值更改的通知。
Stack Overflow用户
发布于 2018-07-27 01:41:12
应避免与=进行双向绑定。
指令需要在链接函数中使用$watch：
app.directive('gvInitializeOrderStatus', function() {
return {
scope: {
field: '@',
̶m̶y̶D̶a̶t̶a̶:̶ ̶'̶=̶'̶
myData: '<'
},
link: function(scope, element) {
console.log('field:', scope.field);
console.log('data:', scope.myData);
scope.$watch('myData', function(value) {
console.log('data:', scope.myData);
});
}
}
});像ng-repeat这样的指令会自动使用观察者。
另外，出于性能原因，应该避免与=进行双向绑定。与<的单向绑定更有效.
要获得更有效的代码，请在控制器中使用生命周期钩：
app.directive('gvInitializeOrderStatus', function() {
return {
scope: {
field: '@',
̶m̶y̶D̶a̶t̶a̶:̶ ̶'̶=̶'̶
myData: '<'
},
bindToController: true,
controllerAs: "$ctrl",
controller: function() {
console.log('field:', this.field);
console.log('data:', this.myData);
this.$onChanges = function(changes) {
if (changes.myData)
console.log('data:', changes.myData.currentValue);
};
});
}
}
});这样做将使代码更高效，并使迁移到角2+更容易。
有不同级别的观察：
ng-repeat指令实际上使用了$watchCollection。
指令可能需要使用生命周期钩。
有关详细信息，请参阅
Stack Overflow用户
发布于 2018-07-26 21:00:28
如果您只想要指令中的数据，就这样做。
Orders.getOverview().$promise.then(function(data) {
self.LineItems = data;
$rootScope.$broadcast('myData', data);
});在您的指令中，只需使用回调函数捕获此事件即可。
$scope.$on('myData', function(event, args) {
var anyThing = args;
// do what you want to do
});https://stackoverflow.com/questions/51546993
复制相似问题
腾讯云开发者
