Question

我尝试了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">&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）尽管使用了＆＃39; =＆＃39;，但复杂属性并未作为对象传递。（见下面的代码）范围

这是因为你将它们作为attrs.whenNormal获得，这是一个字符串（JSON）。您只需要从范围访问它，即scope.whenNormal。它与scope.$eval(attrs.whenNormal)或JSON.parse(attrs.whenNormal)//provided your JSON is valid相同。但是这里的双向绑定并没有多大意义。

2）应该评估以提供单向绑定的函数也将作为字符串传递。

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

<强> Plnkr

角度指令属性未评估

1 个答案: