我正在尝试在动态输入中创建一些事件
这是HTML代码
<input id="{{inputField.id}}"
placeholder="{{inputField.placeHolder}}"
ng-readonly="(!identificationProperty.allowManualInput && inputField.binding == identificationProperty.binding) || inputField.isReadOnly"
type="number"
size="15"
min="{{inputField.minLength}}"
maxLength="{{(inputField.maxLength ? inputField.maxLength : 120)}}"
class="form-control"
ng-model="model[inputField.binding]"
value="{{ model[inputField.binding] || 0 }}"
name="{{inputField.binding}}"
data-toggle="tooltip"
title="{{inputField.placeHolder}}"
bind-events="events | filter: {name:inputField.binding}: true"
step="{{inputField.isDecimal ? 0.01 : 1}}" />
这是控制器
angular.module('app').
controller('519', ['$scope', '$ftHttp', 'ngToast', '$location', function ($scope, $ftHttp, ngToast, $location) {
$scope.metadataPath = '/proxy/metadata/519';
change = function() {
var amount = $scope.viewData.model.amount ? $scope.viewData.model.amount : 0;
var taxesValue = $scope.viewData.model.taxesValue ? $scope.viewData.model.taxesValue : 0;
var additionalValue = $scope.viewData.model.additionalValue ? $scope.viewData.model.additionalValue : 0;
var discountValue = $scope.viewData.model.discountValue ? $scope.viewData.model.discountValue : 0;
$scope.viewData.model.netValue = amount + taxesValue + additionalValue - discountValue;
}
$scope.events = [
{
'name': 'amount',
'event': 'change',
'action': function(){
change();
}
},
{
'name': 'taxesValue',
'event': 'change',
'action': function(){
if($scope.viewData.model.taxesValue && $scope.viewData.model.taxesValue != 0) {
change();
}
}
},
{
'name': 'additionalValue',
'event': 'change',
'action': function(){
if($scope.viewData.model.additionalValue && $scope.viewData.model.additionalValue != 0) {
change();
}
}
},
{
'name': 'discountValue',
'event': 'change',
'action': function(){
if($scope.viewData.model.discountValue && $scope.viewData.model.discountValue != 0) {
change();
}
}
}
];
$scope.getMyScope = function () {
return $scope;
};
$scope.afterAddNew = function (model) {
model['issuanceDate'] = new Date();
};
}]);
这是指令
angular.module('components')
.directive('bindEvents', function () {
return {
scope: {
bindEvents: '='
},
link(scope, element) {
if (!scope.bindEvents) {
return;
}
for(i = 0; i < scope.bindEvents.length; i++) {
element.on(scope.bindEvents[i].event, scope.bindEvents[i].action);
}
}
};})
没有分页指令,一切工作都很好。但是,使用我的新指令后,一旦加载页面,我会收到一个$rootScope:infdig错误,我不理解,因为该指令没有做任何事情来处理可能陷入无限循环的数据。这里有什么问题,我该如何解决?谢谢!
只需在指令中添加= *
angular.module('components')
.directive('bindEvents', function () {
return {
scope: {
bindEvents: '=*'
},
link(scope, element) {
if (!scope.bindEvents) {
return;
}
for(i = 0; i < scope.bindEvents.length; i++) {
element.on(scope.bindEvents[i].event, scope.bindEvents[i].action);
}
}
};})