Question

我正在尝试编写自定义指令并遇到问题。

我正在实施 ANCHOR BUTTON 指令，我可以通过该指令为 ICON，TEXT和STATE（UI-SREF）指定值

HTML模板

<v-anc-btn-get state="profile({ id: editor.profileId })" text="Get Profile" icon="fa-book">
</v-anc-btn-get>

指令

function anchorButtonDirective() {
    var directive =
    {
        restrict: "E",
        template: "<a class='btn btn-info' ui-sref='ctrl.go()'><i class='fa {{ctrl.icon}}'></i> {{ctrl.text}}</button>",
        scope:
            {
                icon: "@",
                text: "@",
                state: "&"
            },
        controller: function ($state, $stateParams) {
            var ctrl = this;

            ctrl.go = function () {
                return ctrl.state;
            }
        },
        controllerAs: "ctrl",
        bindToController: true
    };

    return directive;
}

现在，该指令抛出错误，如 无法从状态'xxx.xx'解析'go'

我在这里做错了什么？

我该如何解决？这样我就可以导航到我在指令中指定的状态了？

感谢您的帮助

编辑1

根据@DanielC的评论编辑。

Answer 1

您可以在ui-sref属性中指定要作为表达式而不是调用函数的状态。

可以通过将ui-sref属性绑定到范围变量ui-sref='{{state}}'或使用ng-click调用控制器go函数来完成。您可以在控制器功能中使用$state服务，通过调用$state.go函数导航到所需状态。

var directive =
    {
        restrict: "E",
        template: "<a class='btn btn-info' ng-click='ctrl.go()'><i class='fa {{ctrl.icon}}'></i> {{text}}</button>",
        scope:
            {
                icon: "@",
                text: "@myText",
                state: "@state"
            },
        controller: function ($scope,$state, $stateParams) {
            var ctrl = this;
            ctrl.state = $scope.state;
            ctrl.go = function () {
                $state.go(ctrl.state);
            }
        },
        controllerAs: "ctrl",
        bindToController: true
    };

    return directive;

这是一个有效的fiddle。

如何导航到自定义指令中的状态？

1 个答案: