自定义指令未显示

Question

我的 ng-repeat 中有以下自定义指令：

<action ng-click="addToCart('event', d, type.id, $index )" text="Hey!" state="ready"></action>

action.js：

(function() {

    angular.module('vendor').directive('action', function() {
        return {
            restrict: 'E',
            scope: {
                text: '@text',
                state: '@state'
            },
            templateUrl: '/js/app/templates/action.html',
            link: ['$http', '$scope', '$element', '$attrs', function($http, $scope, $element, $attrs) {
                $scope.text = $attrs.text;
            }],
            controller: ['$http', '$scope', '$element', '$attrs', function($http, $scope, $element, $attrs) {
                $scope.text = $attrs.text;
            }],
            controllerAs: 'action'
        }
    });

}) ();

action.html:

<a ng-class="{ 'btn-set': isReady || isWorking || isComplete || hasFailed, 'btn-ready-state': isReady, 'btn-working-state': isWorking && selectedIndex == $index, 'btn-complete-state': isComplete && selectedIndex == $index, 'btn-failed-state': hasFailed }">
    <i ng-if="isReady" class="fa fa-shopping-cart"></i>
    <img ng-src="/images/loading.GIF" class="img" ng-show="isWorking && selectedIndex == $index "></span>
    <i ng-if="isComplete && selectedIndex == $index " class="fa fa-check"></i>
    <span class="text">
        <span ng-if="isReady"><% text %></span>
    </span>
</a>

我有一个自定义指令 action 带有自定义属性 text 和 state，文本属性就是指令内显示的文本。但是我的代码似乎不起作用（我没有错误），我是 angularjs 的新手，所以我想我在某处犯了一些新手错误。

注意：我将 {{ }} 更改为 所以它不会与我的 laravel 刀片模板冲突

Answer 1

将您的字符串更改为包含在'' 中，并在您的action.html 中使用{{}}：

<action ng-click="addToCart('event', d, type.id, $index )" text="'Hey!'" state="'ready'"></action>

在您的 HTML 中：

<span ng-if="isReady">{{ text }}</span>

顺便说一句，当你的作用域变量与属性同名时，你不需要提及它，你可以这样做：

scope: {
     text: '@',
     state: '@'
 },

编辑： 正如 squiroid 在他的问题中指出的那样，我认为您的链接/控制器功能有点偏离。首先，您不需要使用[，因为它们是用来修复注入的。你可以这样做：

link: function(scope, element, attrs) {
   //now you have scope.text, you don't need to assign from attrs
},

$http 服务应该被注入指令本身，而不是链接/控制器函数，像这样：

.directive('action', ['$http', function($http) {
   ...
}]

此外，无需覆盖链接/控制器中的文本。您只需要使用scope.text，因为它来自您的隔离范围声明。

Answer 2

据我所知，除了两件事之外，一切都很好

<span ng-if="isReady">{{ text }}</span>

这里的第二个指令链接函数顺序首先是范围，第二是元素，第三个属性，最后是父控制器。如果你想在链接中使用$http，你必须将它注入指令本身而不是链接中不是由 DI 填充的。

link: function($scope, $element, $attrs) {
                $scope.text = $attrs.text;
            },

希望对你有帮助:)

Answer 3

尝试添加

transclude: true,

和 范围： { 文本：'='， 状态：'=' }

那么你的