CODEWITHSUNDEEP
javascriptangularjs
map7
map7

Reputation: 5126

AngularJS custom directive

I've been following the tutorials on the following website and I'm trying to create the icon directive he is talking about.

http://blog.berylliumwork.com/2012/10/tutorials-on-angularjs-and-rails-7.html

Here is what I've got

tasks.js

angular.module('momentum', ['momentumService'])
    .config(["$httpProvider", function(provider) {
        console.log("httpProvider");
        provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
    }]);


angular.module('momentumService', ['ngResource']).
    factory('Task', function($resource) {
        console.log("Create resource action");
        return $resource('/tasks/:task_id/:action', {task_id:'@id'}, {
            update: { method: 'PUT' }
        });
    }).
    directive('icon', function() {
        return {
            restrict: 'A',      // attribute
            link: function(scope, element, attrs) { // Manipulate the DOM element
                element.prepend('<i class="icon-tasks"></i> ');
            }
        }
    });

index.html

<h1>Listing tasks</h1>

<div ng-controller="TasksController" ng-init="index()">
  <a href="" ng-click="create({title: 'New task'})">Create</a>

  <span ng-hide="tasks">Loading</span>
  <table>
    <tr>
      <th>Title</th>
      <th>Finished</th>
    </tr>

    <tr ng-repeat="task in tasks" id="task_{{task.id}}">
      <td data-icon="tasks">{{ task.title }}</td>
      <td>{{ task.finished }}</td>

      <td><a href="" ng-click="action(task.id, 'action')">Action</a></td>
      <td><a href="" ng-click="show(task.id)">Show</a></td>
      <td><a href="" ng-click="edit(task.id)">Edit</a></td>
      <td><a href="" ng-click="destroy(task.id)">Delete</a></td>
    </tr>
  </table>
</div>

If I put into the index.html I get an icon. What is suppose to happen here is the data-icon should call the directive icon function within tasks.js and display the icon on every task. Why is it not calling this?

Upvotes: 1

Views: 2681

Answers (2)

Kapil Gandhi
Kapil Gandhi

Reputation: 181

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('simpleDemo',function(){
  var newtemplate = function(){
     var template = '<i class="glyphicon glyphicon-remove"><i>';
     return template;
  }
   return {
    restrict: 'E',
    template: newtemplate
  }
})



<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <button><simple-demo></simple-demo></button>
  </body>

Upvotes: 0

map7
map7

Reputation: 5126

Noticed if I put everything in the one module it will work.

angular.module('momentum', ['momentumService'])
    .config(["$httpProvider", function(provider) {
        console.log("httpProvider");
        provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
    }]).
    factory('Task', function($resource) {
        console.log("Create resource action");
        return $resource('/tasks/:task_id/:action', {task_id:'@id'}, {
            update: { method: 'PUT' }
        });
    }).
    directive('icon', function() {
        return {
            restrict: 'A',      // attribute
            link: function(scope, element, attrs) { // Manipulate the DOM element
                element.prepend('<i class="icon-tasks"></i> ');
            }
        }
    });

Upvotes: 2

Related Questions