AngularJS:缩小破坏了我的指令 [英] AngularJS: minifications breaks my directive
问题描述
我使用指令要求用户在模态中进行操作确认.
它在开发过程中就像一个魅力,但在缩小之后,它就坏了.
这是我得到的可怕的$injector: unpr"错误:
错误:[$injector:unpr] 未知提供者:aProvider <- a...
我认为问题在于 $scope
和 $modalInstance
已重命名,不应该重命名,但我不知道如何避免这种情况...
这是指令代码:
'use strict';app.directive('reallyClick', ['$modal', function($modal) {var modalInstanceCtrl = function ($scope, $modalInstance) {$scope.ok = 函数 () {$modalInstance.close();};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};};返回 {限制:'A',范围: {真的点击:'&',项目:'='},链接:函数(范围、元素、属性){element.bind('点击', function() {var message = attrs.reallyMessage ||'你确定吗?';var modalHtml = ''+ 消息 + '</div>';modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btnbtn-warning" ng-click="cancel()">Cancel</button></div>';var modalInstance = $modal.open({模板:modalHtml,控制器:modalInstanceCtrl});modalInstance.result.then(函数(){scope.reallyClick({item:scope.item});//引发错误:$digest 已经在进行中}, 功能() {//模态关闭});});}};}]);我是这样使用的:
<代码>...<td title="删除客户"><按钮class="btn btn-primary glyphicon glyphicon-trash"real-message="您真的确定要删除客户 {{customer.name}} 吗?真的点击=删除客户(客户ID)"></按钮></td>...
如果有帮助的话,这些是我在构建阶段使用的模块:
'auto_install','干净:dist','收藏夹','连线','useminPrepare','并发:dist','自动前缀','连接','ngmin','复制:分布','cdnify','cssmin','丑化','filerev','usemin','htmlmin',
这些是我在应用中注入的模块:
var app = angular.module('smallBusinessApp', ['ngSanitize','ngRoute','火力','ui.bootstrap',]);
解决方案 modalInstance Controller 也需要使用依赖注入语法创建,
'use strict';app.directive('reallyClick', ['$modal', function($modal) {返回 {限制:'A',范围: {真的点击:'&',项目:'='},链接:函数(范围、元素、属性){element.bind('点击', function() {var message = attrs.reallyMessage ||'你确定吗?';var modalHtml = ''+ 消息 + '</div>';modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btnbtn-warning" ng-click="cancel()">Cancel</button></div>';var modalInstance = $modal.open({模板:modalHtml,控制器:modalInstanceCtrl});modalInstance.result.then(函数(){scope.reallyClick({item:scope.item});//引发错误:$digest 已经在进行中}, 功能() {//模态关闭});});}};}]);模型实例控制器:
app.controller('modalInstanceCtrl',['$scope','$modalInstance',function ($scope, $modalInstance) {$scope.ok = 函数 () {$modalInstance.close();};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};}]);
对我来说也是一个问题,不得不将模态的控制器部分分开并这样做,希望它有所帮助!!
I use a directive to ask user for action confirmations in modals.
It works like a charm during development, but, after minification, it's broken.
This is the dreadful "$injector: unpr" error I get:
Error: [$injector:unpr] Unknown provider: aProvider <- a
...
I presume the problem is that $scope
and $modalInstance
are renamed, and should not be, but I don't know how to avoid this...
This is the directive code:
'use strict';
app.directive('reallyClick', ['$modal', function($modal) {
var modalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
return {
restrict: 'A',
scope: {
reallyClick: '&',
item: '='
},
link: function (scope, element, attrs) {
element.bind( 'click', function() {
var message = attrs.reallyMessage || 'Are you sure?';
var modalHtml = '<div class="modal-body">' + message + '</div>';
modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';
var modalInstance = $modal.open({
template: modalHtml,
controller: modalInstanceCtrl
});
modalInstance.result.then(function () {
scope.reallyClick({item:scope.item}); // raise an error : $digest already in progress
}, function() {
// modal dismissed
});
});
}
};
}]);
I use it this way:
...
<td title="Delete customer">
<button
class="btn btn-primary glyphicon glyphicon-trash"
really-message="Are you really sure to remove customer <i>{{customer.name}}</i> ?" really-click="deleteCustomer(customerId)"
></button>
</td>
...
If it can be of any help, these are the modules I use during the build phase:
'auto_install',
'clean:dist',
'favicons',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin',
and these are the modules I inject in my app:
var app = angular.module('smallBusinessApp', [
'ngSanitize',
'ngRoute',
'firebase',
'ui.bootstrap',
]);
解决方案 The modalInstance Controller needs to be created with the dependency injection syntax as well,
'use strict';
app.directive('reallyClick', ['$modal', function($modal) {
return {
restrict: 'A',
scope: {
reallyClick: '&',
item: '='
},
link: function (scope, element, attrs) {
element.bind( 'click', function() {
var message = attrs.reallyMessage || 'Are you sure?';
var modalHtml = '<div class="modal-body">' + message + '</div>';
modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';
var modalInstance = $modal.open({
template: modalHtml,
controller: modalInstanceCtrl
});
modalInstance.result.then(function () {
scope.reallyClick({item:scope.item}); // raise an error : $digest already in progress
}, function() {
// modal dismissed
});
});
}
};
}]);
ModelInstanceController:
app.controller('modalInstanceCtrl',['$scope','$modalInstance',function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
Was a problem for me too and had to separate the controller part of the modal and do it like this, hope it helps!!
这篇关于AngularJS:缩小破坏了我的指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文