CODEWITHSUNDEEP
angularjsangularjs-directive
user3718908x100
user3718908x100

Reputation: 8509

Custom Directive Not Showing

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:

<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>

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.

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

Upvotes: 2

Views: 3714

Answers (3)

Omri Aharon
Omri Aharon

Reputation: 17064

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>

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: '@'
 },

Edit: 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
},

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

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

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.

Upvotes: 1

squiroid
squiroid

Reputation: 14027

As far as i noticed everthing is fine except two thing

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

Second the directive link function here order matters first is scope ,second is element,thir attribute and last is controller of parent.And if you want to use $http in link you must inject it in directive itself not in link beacuse link is not filled by DI .

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

Hope it helps :)

Upvotes: 1

Abhishek Mishra
Abhishek Mishra

Reputation: 81

try to add 

transclude: true,

and scope: { text: '=', state: '=' }

then your

Upvotes: 0

Related Questions