Angularjs 自定义指令不能用于 ui-sref答案

【问题标题】：Angularjs custom directive cannot work for ui-srefAngularjs 自定义指令不能用于 ui-sref
【发布时间】：2017-07-06 05:39:54
【问题描述】：

首先，这可行：<a ui-sref="students({courseId: $ctrl.Course.Id})">{{ student.Name }}</a> 这支持我的路由器工作正常。

我创建了一个自定义指令：link: "=link"

<div ng-if="$ctrl.link && $ctrl.link.Name && $ctrl.link.State">
            <a ui-sref="{{$ctrl.link.State}}">{{$ctrl.link.Name}}</a>
</div>

为什么这行不通：

<div link="{ Name: 'View Students', State: 'students({courseId: $ctrl.Course.Id})' }">

这是错误：

转换拒绝（$id：0 类型：6，消息：转换错误，详细信息：错误：参数值对状态“学生”无效）

更新：我的自定义指令

angular.module('Foo').component('Bar', {
        controller: LinkController,
        templateUrl: "link.tpl.html",
        transclude: true,
        bindings: {
            link: "=link",
    });

【问题讨论】：

请发布您的指令的定义。
我添加了我的指令定义。
错误缩小了一点。您的 ({courseId: $ctrl.Course.Id}) 没有被正确评估。看起来你在最后一个括号后面有一个浮动单引号。
这只是我的错字。我添加了另一个单引号。
这个{courseId: $ctrl.Course.Id} 是作为承诺的结果进行评估的吗？如果是，则您的指令无法知道承诺是履行还是拒绝。

标签： angularjs angularjs-directive ui-sref

【解决方案1】：

我解决了这个问题如下：

我如何调试：我尝试将“$ctrl.Course.Id”替换为 123（数字），它可以工作。所以我知道我的自定义链接指令正在工作。

<div link="{ Name: 'View Students', State: 'students({courseId: $ctrl.Course.Id})' }">

然后我意识到这是因为我将这个'$ctrl.Course.Id'放在单引号内，它会将其解析为字符串，而不是数字。

所以，这就是我所做的：

转到组件，创建一个对象：
this.studentsLink = { Name: 'View Students', State: 'students({courseId:'.concat(this.$stateParams.courseId, '})')};

我的 this.$stateParams.courseId 是一个字符串。如果是数字，我们应该做this.$stateParams.courseId.toString()

然后转到模板：

<div link="$ctrl.studentsLink">

希望这对未来遇到同样问题的开发人员有所帮助。

【讨论】：