javascript - 未评估 Angular Directive(指令)属性

Question

我试过提到的答案 here但运气不好(我使用的是 angularjs 1.3)。我的问题分为两部分

1) 尽管在作用域中使用了“=”(参见下面的代码)，但复杂属性并未作为对象传递

2) 应该评估以提供单向绑定(bind)的函数也改为作为字符串传递

示例使用，

<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">&nbsp;{{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">&nbsp;{{smartBtnLabelCtrl.props.label}}</span>'
        };
    });

Answer 1

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 方式绑定(bind)没有多大意义。

2) the function that should evaluate to provide one-way binding is also being passed as string instead.

那是因为当您使用函数绑定(bind)时，它们会被评估为具有绑定(bind)值的 getter(您将绑定(bind)值指定为 RestEditCtrl.restaurant.id)。为了访问该值，如果函数 ajaxState 返回某些内容，您需要执行 curState = scope.btnState(); 而不是 curState = attrs.btnState，基本上评估 getter 以获取值。

Plnkr