多指令资源争用'当创建自定义指令和使用ui引导时

Error 'Multiple Directive Resource Contention' when creating custom directive and using UI-bootstrap

本文关键字：ui 指令 自定义 争用 资源 创建 多指令      更新时间：2023-09-26

我正在尝试创建一个指令，该指令具有输入评级，并根据此输入在DOM中绘制星星。

但是，当我尝试以下操作时:

.directive('stars', function (Utils) {
    return {
        restrict: 'AE', //E = element, A = attribute, C = class, M = comment  
        transclude: true,
        template: "{{starsObj}}",
        link: function (scope, element, attrs) {
           scope.starsObj = Utils.returnStars(attrs.rating)
        } 
    }
})

，其中Utils.returnStars(attrs.rating)返回一个数组(我想稍后使用)。

…我得到以下错误:

多指令资源争用

https://docs.angularjs.org/error/编译/multidir美元? p0 = rating& p1 = % 20(模块:% 20 ui.bootstrap.rating), p2 = stars& p3 = % 20(模块:% 20 noodl.controllers-product)和p4 = template& p5 3 = % % 20 cspan ng-mouseleave % 3 d % 22重置()% 20评级% 3 d % 225% 22% 22% 3 e

从我的项目中删除ui-bootstrap解决了这个问题，但我最终确实需要ui-bootstrap。

怎么回事?

您不需要添加'scope '。'前缀到你的变量从指令范围，所以你应该改变你的指令的template属性为:

return {
    restrict: 'AE', //E = element, A = attribute, C = class, M = comment  
    transclude: true,
    template: "{{starsObj}}", //You don't need 'scope.' prefix.
    link: function (scope, element, attrs) {
       scope.starsObj = Utils.returnStars(attrs.rating)
    } 
}

活塞的演示。

UPD:但是我看到控制台的错误与ui-bootstrap有关。你能提供代码更多的代码，你在哪里使用它?

UPD2:这里的问题是ui.bootstrap有他自己的评级指令。所以，要解决这个问题，你可以把stars指令的rating属性重命名为其他东西。我更新了我的活塞

相关文章：