Angular 指令属性未被求值

Question

我已经尝试了这里提到的答案，但没有好运气（我正在使用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">&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>'
        };
    });

- Vishal Seth

---

我认为PSL在回答你的问题方面做得很好，我正在准备这个plunker，感觉它可能会有所帮助，http://plnkr.co/edit/HDiiSikmGN1CYLzStoJq?p=preview 此外，这篇文章对这个主题非常有价值，http://blog-it.hypoport.de/2013/11/06/passing-functions-to-angularjs-directives/ - teleaziz

Answer 1

1)尽管在作用域中使用'='，但复杂属性仍未作为对象传递（请参见下面的代码）

这是因为您得到的是一个字符串(JSON)，即attrs.whenNormal。你只需要从作用域中访问它，也就是说，scope.whenNormal。它将与scope.$eval(attrs.whenNormal)或JSON.parse(attrs.whenNormal)//假设您的JSON是有效的相同。 但是这里的双向绑定意义不大。

2) 应该进行评估以提供单向绑定的函数也被传递为字符串。

这是因为当使用函数绑定时，它们被评估为带有绑定值的getter(您将绑定值指定为RestEditCtrl.restaurant.id)。为了访问值，前提是函数ajaxState返回一些内容，您需要执行curState = scope.btnState();而不是curState = attrs.btnState，基本上是通过评估器获取值。

Plnkr

- PSL

---

不要忘记声明作用域：{whenNormal: '='} - Ella Sharakanski