gpt4 book ai didi

javascript - 如何在 angular.js 中将数据从服务传递到指令

转载 作者:行者123 更新时间:2023-12-02 14:37:13 25 4
gpt4 key购买 nike

我有一个警报服务,它在页面顶部显示警报。我编写了一个服务和一个指令,该指令利用来自服务的数据。

但是,当我使用警报服务添加服务并将其传递给指令时,它不会显示警报

这是我的代码

模板

<div class="alert alert-{{alert.type}}">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="close()">&times;</button>
<div ng-bind="::alert.message" ></div>
</div>

警报服务和指令

angular.module('test')
.service('alertService', function() {
var alerts = [];
this.add = function(type, msg) {
var self = this;
var alert = {
type: type,
msg: msg,
close: function() {
return self.closeAlert(alert);
}
};
return alerts.push(alert);
};
this.closeAlert = function(alert) {
return this.closeAlertIdx(alerts.indexOf(alert));
};
this.closeAlertIdx = function(index) {
return alerts.splice(index, 1);
};
this.clear = function() {
alerts = [];
};
this.getAlerts = function() {
return alerts;
};
})
.directive('alertList', ['alertService', function(alertService) {
return {
restrict: 'EA',
templateUrl: 'templates/alert/alert.html',
replace: true,
link: function(scope) {
scope.alerts = alertService.getAlerts();
}
};
}]);

在index.html中,我引用了alert-list指令

<div>
<alert-list ng-repeat="alert in alerts">
</alert-list>
</div>

在我的 Controller 中,

alertService.add('info', 'This is a message');

我看到alertService将警报添加到数组中,但是当我在指令的链接函数中放置断点时,它永远不会被调用

最佳答案

服务是返回对象的函数,因此您必须将服务修改为或多或少像这样:

.service('alertService', function() {
var alerts = [];
return{
add : function(type, msg) {
var self = this;
var alert = {
type: type,
msg: msg,
close: function() {
return self.closeAlert(alert);
}
};
return alerts.push(alert);
},
closeAlert: function(alert) {
return this.closeAlertIdx(alerts.indexOf(alert));
},
closeAlertIdx : function(index) {
return alerts.splice(index, 1);
},
clear: function() {
alerts = [];
},
getAlerts: function() {
return alerts;
}
})

关于javascript - 如何在 angular.js 中将数据从服务传递到指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37356897/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com