AngularJS自定義指令

我一直在關注以下網站上的教程，並試圖創建他正在討論的圖標指令。AngularJS自定義指令

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

這裏是我有

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>

如果我投入的index.html我得到一個圖標。假設這裏發生的是數據圖標應該調用tasks.js中的指令圖標函數，並在每個任務上顯示圖標。爲什麼不調用它？

來源

2012-11-27 map7

注意到，如果我把所有的東西放在一個模塊中，它就會工作。

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> '); 
      } 
     } 
    });

來源

2012-11-27 23:49:59 map7

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>

來源

2014-05-14 06:32:24

AngularJS自定義指令

回答

相關問題