1

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

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

这是我所拥有的

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

索引.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 我会得到一个图标。这里假设发生的是 data-icon 应该调用 tasks.js 中的指令图标函数并在每个任务上显示图标。为什么不调用这个？

4

2 回答 2

2

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

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-27T23:49:59.737 回答
0 
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-14T06:32:24.773 回答