[英]AngularJS: Pass a scope function to a directive inside a JSN object
我创建了一个指令,该指令基于触发值显示div中的label和action链接的多种组合之一。
标签和触发器值在它们自己的属性中指定-到目前为止没有问题。
动作可以看到,可以有任意数量,它们是在actions
属性中定义的。 这是一个JSON编码的对象数组,每个对象代表一个可能的操作链接。
像这样使用时,一切工作正常:
<record-milestone
label="'Login Details'" test-value="member.login_details_sent"
action="sendLoginDetails(member)"
actions="[
{'test': 'testResult !== null', 'label': member.login_details_sent.toDateString(), 'actionable': false, 'className': 'progressmsgyes'},
{'test': 'testResult === null', 'label': 'Send...', 'actionable': true, 'className': 'progressmsgno', 'default': true}
]">
</record-milestone>
请特别注意member.login_details_sent.toDateString()
位。
我想改为使用定义为$scope
一部分的函数来产生标签-像这样...
<record-milestone
label="'Membership Fee'" test-value="member.membership_fee_paid"
action="setDate(member, 'membership_fee_paid')"
actions="[
{'test': 'testResult !== null', 'label': getDateString(member.membership_fee_paid), 'actionable': false, 'className': 'progressmsgyes', 'default': true},
{'test': 'testResult === null', 'label': 'Paid...', 'actionable': true, 'className': 'progressmsgno'}
]">
</record-milestone>
在这种情况下,应采用getDateString(member.membership_fee_paid)
值的操作标签为空白。 向函数本身添加警报表明根本没有调用它。 我最好的猜测是该指令未将其视为函数。
有没有办法通过这样的数组将范围函数传递给指令,还是我完全偏离了轨道?
我仍在学习AngularJS,这是我对非平凡指令的第一次尝试,因此,如果我走错了方向,我将不会重写。
这是其余的代码。
recordmilestone.js
/**
* Displays a bar showing a label and value, allowing an action. Action can vary depending on the value.
*
* Attributes:
* - label - The label for the bar
* - testValue - An expression to be evaluated an d compared against the 'test' element of the actions array
* - action - An expression to be executed when the action button is clicked
* - actions - Array of Objects. For each object:
* - 'test' is an expression that is evaluated to determine whether this action is used. This is executed in the
* directive's isolated scope so does not have access to the controller's scope variables. testResult can be used
* to represent the expression in the testValue attribute.
* - 'label' is the label to be displayed for the action button if the test resolves to true,
* - 'actionable' determines whether the action link should be clickable - if true a link is shown, if false it is
* shown simply as text
* - 'className' is the class to apply to the element
* - 'default' (optional) if true, this action is applied if no other rules match. If more than one action is
* specified as default, the last action with `default: true` is used.
*
* Example usage:
* <record-milestone
* label="Stage 1" test-value="stage1.complete" action="item.complete = true"
* actions="[
* {'test': true, 'label': 'Completed', 'actionable': false, 'className': 'progressmsgyes'},
* {'test': false, 'label': 'Mark complete', 'actionable': true, 'className': 'progressmsgno', 'default': true}
* ]">
*
*/
directives.directive('recordMilestone',
[
function() {
//Define the controller
var controller = ['$scope', '$parse', '$rootScope',
function($scope, $parse, $rootScope) {
//Watch the value
$scope.$watch(function() {
return $parse($scope.testValue)();
},
function(newValue) {
$scope.testResult = newValue;
//Evaluate actions array
//Array.some() executes the callback for each element until one returns true. Better than forEach() which
//can't be interrupted
$scope.actions.some( function(action) {
if( $parse(action.test)($scope) || action.default ) {
$scope.actionLabel = action.label;
$scope.actionLabelBackup = action.label;
$scope.className = action.className;
$scope.actionable = action.actionable;
$scope.uploadAction = action.uploadAction | false;
//Return true if the value matched, false otherwise
return $parse(action.test)($scope);
}
return false;
});
});
$scope.doAction = function() {
$scope.action();
}
$scope.uploadStarted = function(files) {
$scope.actionLabel = 'Uploading...';
}
$scope.uploadFailed = function (response) {
$scope.actionLabel = $scope.actionLabelBackup;
alert("Upload failed: " + response.data.errormessage);
}
}];
return {
restrict: 'E',
templateUrl: '/app/shared/directives/recordMilestoneTemplate.html',
controller: controller,
scope: {
label: '=',
testValue: '&',
actions: '=',
action: '&',
uploadUrl: '=',
uploadComplete: '&'
}
}
}]);
recordMilestoneTemplate.html
<div ng-class="className">
<a ng-if="actionable && !uploadAction" ng-click="doAction()">{{actionLabel}}</a>
<div class="btn-upload"
ng-if="actionable && uploadAction"
upload-button
url="{{uploadUrl}}"
on-upload="uploadStarted(files)"
on-error="uploadFailed(response)"
on-success="uploadComplete(response)"
>{{actionLabel}}</div>
<div ng-if="!actionable">{{actionLabel}}</div>
{{label}}
</div>
找到了解决我问题的方法。
问题不是因为它不知道如何运行数组中定义的函数,而是当函数的结果更改时没有启动摘要循环。
显示记录的详细信息时(在用户单击之后),将创建指令中定义的元素。 随后是HTTP GET,以获取信息本身。
首次创建指令时, member.membership_fee_paid
值为空白。 创建伪指令(由于缺少值,因此使用空白标签),然后填充数据。
像在actions
属性上的简单$scope.$watch
强制更新内部标签变量解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.