自定义指令未显示 [英] Custom Directive Not Showing

问题描述

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

I have the following custom directive inside my 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:

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，text 属性只是指令中显示的文本.但是我的代码似乎不起作用(我没有收到任何错误)，我是 angularjs 的新手，所以我想我在某处犯了一些新手错误.

I have a custom directive action with custom attributes text and state, the text attribute is simply what text displays inside the directive. However my code does not seem to work (i get no errors), i am new to angularjs so i suppose i am making some rookie mistake somewhere.

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

Note: I changed {{ }} to <% %> so it doesn't conflict with my laravel blade templating

推荐答案

更改您的字符串以包裹在 '' 中，并在您的 {{}} 中使用 {{}}代码>action.html:

Change your strings to be wrapped in '', and use {{}} inside your action.html:

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

在你的 HTML 中:

And in your HTML:

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

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

And by the way, when your scope variables are the same name as the attribute you don't need to mention it, and you can just do:

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

正如 squiroid 在他的问题中指出的那样，我认为您的链接/控制器功能有点偏离.首先，您不需要使用 [，因为它们用于修复注入.你可以简单地做:

As squiroid pointed out in his question, I think your link/controller functions are a bit off. First, you don't need to use the [, since those are there to fix injections. You can simply do:

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

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

The $http service should be injected to the directive itself, not the link/controller function, like this:

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

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

Also, there's no need to overwrite the text in your link/controller. You just need to use scope.text since it's there from your isolated scope declaration.

这篇关于自定义指令未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！