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

问题描述

我有我的NG-重复里面以下自定义指令：

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：

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>

我有一个自定义指令的操作自定义属性的文本和状态，文本属性仅仅是指令里面是什么文本显示。但是我的code似乎并没有工作（我没有得到任何错误），我是新来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.

请注意：我改的 {{}} 为＆LT;％％> ，因此不会与我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屋！