angular 未评估指令属性
angular directive attributes not evaluated
我试过 here 提到的答案,但没有成功(我使用的是 angularjs 1.3)。我的问题分为两部分
1) 尽管在范围
中使用了“=”(参见下面的代码),但复杂属性并未作为对象传递
2) 应该求值以提供单向绑定的函数也改为作为字符串传递
示例使用,
<button type="button" class="btn btn-success" ng-click="RestEditCtrl.saveRestaurantDetails();">
<smart-btn-label btn-state="RestEditCtrl.ajaxState(RestEditCtrl.restaurant.id)"
when-normal="{label: 'Save', icon: 'glyphicon-floppy-disk' }"
when-active="{label: 'Saving...', icon: 'glyphicon-refresh glyphicon-spin-animate'}"
when-success="{label: 'Saved!', icon: 'glyphicon glyphicon-floppy-saved'}"
when-error="{label: 'Try saving again', icon: 'glyphicon glyphicon-exclamation-sign'}"></smart-btn-label>
</button>
指令代码,
angular.module("app")
.directive('smartBtnLabel', function () {
return {
restrict: 'E',
scope: {
btnState: '&', // not working, @ evaluates but that defeats my purpose
whenActive: '=', // not evaluating any which way, it always comes as string
whenError: '=',
whenSuccess: '=',
whenNormal: '='
},
link: function (scope, elem, attrs) {
console.log(attrs);
var curState = "normal",
curLabel = attrs.whenNormal ? attrs.whenNormal.label : "",
curIcon = attrs.whenNormal ? attrs.whenNormal.icon : "";
if (attrs.btnState) curState = attrs.btnState;
if(curState == "active"){
curLabel = attrs.whenActive ? attrs.whenActive.label : "";
curIcon = attrs.whenActive ? attrs.whenActive.icon : ""
} else if(curState == "success"){
curLabel = attrs.whenSuccess ? attrs.whenSuccess.label : "";
curIcon = attrs.whenSuccess ? attrs.whenSuccess.icon : ""
} else if(curState == "error"){
curLabel = attrs.whenError ? attrs.whenError.label : "";
curIcon = attrs.whenError ? attrs.whenError.icon : ""
}
scope.curLabel = curLabel;
scope.curIcon = curIcon;
},
template: '<span aria-hidden="true" ng-show="curIcon" class="glyphicon {{curIcon}}" ></span>' +
'<span ng-show="curLabel"> {{curLabel}}</span>'
};
});
我在这里做错了什么? :-(
解决方案
感谢 PSL,这是我最终得到的:
angular.module("app")
.directive('smartBtnLabel', function () {
return {
restrict: 'E',
scope: {
btnState: '&',
whenActive: '&',
whenError: '&',
whenSuccess: '&',
whenNormal: '&'
},
controller: ['$scope', function($scope){
var vm = this;
vm.props = {icon: "", label: ""};
var _setProperties = function () {
var _btnState = "normal";
if ($scope.btnState) _btnState = $scope.btnState();
if (_btnState == "active" && $scope.whenActive) vm.props = $scope.whenActive();
else if (_btnState == "success" && $scope.whenSuccess) vm.props = $scope.whenSuccess();
else if (_btnState == "error" && $scope.whenError) vm.props = $scope.whenError();
else if ($scope.whenNormal) vm.props = $scope.whenNormal();
};
if($scope.btnState){
$scope.$watch($scope.btnState, function () {
_setProperties();
});
}
_setProperties();
}],
controllerAs : "smartBtnLabelCtrl",
template: '<span aria-hidden="true" ng-show="smartBtnLabelCtrl.props.icon" class="glyphicon {{smartBtnLabelCtrl.props.icon}}" ></span>' +
'<span ng-show="smartBtnLabelCtrl.props.label"> {{smartBtnLabelCtrl.props.label}}</span>'
};
});
1) Complex attributes are not being passed as objects despite using '=' (see code below) in scope
那是因为您将它们作为 attrs.whenNormal
获取,这是一个字符串 (JSON)。相反,您只需要从范围访问它,即 scope.whenNormal
。它与 scope.$eval(attrs.whenNormal)
或 JSON.parse(attrs.whenNormal)//provided your JSON is valid
相同。
但是这里的 2 方式绑定并没有多大意义。
2) the function that should evaluate to provide one-way binding is also being passed as string instead.
这是因为当您使用函数绑定时,它们会被评估为具有绑定值的 getter(您将绑定值指定为 RestEditCtrl.restaurant.id
)。为了访问值,提供函数 ajaxState
returns 东西,你需要做 curState = scope.btnState();
而不是 curState = attrs.btnState
,基本上计算 getter 来获取值.
我试过 here 提到的答案,但没有成功(我使用的是 angularjs 1.3)。我的问题分为两部分
1) 尽管在范围
中使用了“=”(参见下面的代码),但复杂属性并未作为对象传递2) 应该求值以提供单向绑定的函数也改为作为字符串传递
示例使用,
<button type="button" class="btn btn-success" ng-click="RestEditCtrl.saveRestaurantDetails();">
<smart-btn-label btn-state="RestEditCtrl.ajaxState(RestEditCtrl.restaurant.id)"
when-normal="{label: 'Save', icon: 'glyphicon-floppy-disk' }"
when-active="{label: 'Saving...', icon: 'glyphicon-refresh glyphicon-spin-animate'}"
when-success="{label: 'Saved!', icon: 'glyphicon glyphicon-floppy-saved'}"
when-error="{label: 'Try saving again', icon: 'glyphicon glyphicon-exclamation-sign'}"></smart-btn-label>
</button>
指令代码,
angular.module("app")
.directive('smartBtnLabel', function () {
return {
restrict: 'E',
scope: {
btnState: '&', // not working, @ evaluates but that defeats my purpose
whenActive: '=', // not evaluating any which way, it always comes as string
whenError: '=',
whenSuccess: '=',
whenNormal: '='
},
link: function (scope, elem, attrs) {
console.log(attrs);
var curState = "normal",
curLabel = attrs.whenNormal ? attrs.whenNormal.label : "",
curIcon = attrs.whenNormal ? attrs.whenNormal.icon : "";
if (attrs.btnState) curState = attrs.btnState;
if(curState == "active"){
curLabel = attrs.whenActive ? attrs.whenActive.label : "";
curIcon = attrs.whenActive ? attrs.whenActive.icon : ""
} else if(curState == "success"){
curLabel = attrs.whenSuccess ? attrs.whenSuccess.label : "";
curIcon = attrs.whenSuccess ? attrs.whenSuccess.icon : ""
} else if(curState == "error"){
curLabel = attrs.whenError ? attrs.whenError.label : "";
curIcon = attrs.whenError ? attrs.whenError.icon : ""
}
scope.curLabel = curLabel;
scope.curIcon = curIcon;
},
template: '<span aria-hidden="true" ng-show="curIcon" class="glyphicon {{curIcon}}" ></span>' +
'<span ng-show="curLabel"> {{curLabel}}</span>'
};
});
我在这里做错了什么? :-(
解决方案
感谢 PSL,这是我最终得到的:
angular.module("app")
.directive('smartBtnLabel', function () {
return {
restrict: 'E',
scope: {
btnState: '&',
whenActive: '&',
whenError: '&',
whenSuccess: '&',
whenNormal: '&'
},
controller: ['$scope', function($scope){
var vm = this;
vm.props = {icon: "", label: ""};
var _setProperties = function () {
var _btnState = "normal";
if ($scope.btnState) _btnState = $scope.btnState();
if (_btnState == "active" && $scope.whenActive) vm.props = $scope.whenActive();
else if (_btnState == "success" && $scope.whenSuccess) vm.props = $scope.whenSuccess();
else if (_btnState == "error" && $scope.whenError) vm.props = $scope.whenError();
else if ($scope.whenNormal) vm.props = $scope.whenNormal();
};
if($scope.btnState){
$scope.$watch($scope.btnState, function () {
_setProperties();
});
}
_setProperties();
}],
controllerAs : "smartBtnLabelCtrl",
template: '<span aria-hidden="true" ng-show="smartBtnLabelCtrl.props.icon" class="glyphicon {{smartBtnLabelCtrl.props.icon}}" ></span>' +
'<span ng-show="smartBtnLabelCtrl.props.label"> {{smartBtnLabelCtrl.props.label}}</span>'
};
});
1) Complex attributes are not being passed as objects despite using '=' (see code below) in scope
那是因为您将它们作为 attrs.whenNormal
获取,这是一个字符串 (JSON)。相反,您只需要从范围访问它,即 scope.whenNormal
。它与 scope.$eval(attrs.whenNormal)
或 JSON.parse(attrs.whenNormal)//provided your JSON is valid
相同。
但是这里的 2 方式绑定并没有多大意义。
2) the function that should evaluate to provide one-way binding is also being passed as string instead.
这是因为当您使用函数绑定时,它们会被评估为具有绑定值的 getter(您将绑定值指定为 RestEditCtrl.restaurant.id
)。为了访问值,提供函数 ajaxState
returns 东西,你需要做 curState = scope.btnState();
而不是 curState = attrs.btnState
,基本上计算 getter 来获取值.