Question

我一直在关注以下网站上的教程，我正在尝试创建他正在讨论的图标指令。

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中的指令图标功能，并在每个任务上显示图标。为什么不叫这个？

Answer 1

如果我将所有内容都放在一个模块中，它会起作用。

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

Answer 2

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>

AngularJS自定义指令

2 个答案: