AngularJS 사용자 정의 지시문

다음 웹 사이트의 자습서를 읽었으며 내가 말하는 아이콘 지시문을 작성하려고합니다. 여기 AngularJS 사용자 정의 지시문

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

내가 얻을 index.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>

있어 무엇인가 아이콘. 여기에서 일어나는 일은 데이터 아이콘이 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 사용자 정의 지시문

답변

관련 문제