1

私は次のWebサイトのチュートリアルに従っており、彼が話しているアイコンディレクティブを作成しようとしています。

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に入れると、アイコンが表示されます。ここで発生すると想定されるのは、data-iconがtasks.js内のディレクティブアイコン関数を呼び出し、すべてのタスクにアイコンを表示する必要があることです。なぜこれを呼ばないのですか？

4

2 に答える 2

2

すべてを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> ');
            }
        }
    });
于 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 に答える