Question

我是angular.js的新手，我在点击某个项目时尝试添加叠加时间轴视图这是一个我发现here的插件，但似乎是在使用JQuery，我不知道如何传递数据，当我点击项目时，我从角度到JQuery。我尝试了一些使用指令找到的方法，但它们似乎没有用。我正在做的是获取数据并显示如下：

<body>
    <div ng-controller="MyCtrl" class="gridListdemoBasicUsage" ng-app="MyApp">
      <div layout-wrap="" layout="row" class="md-padding">
        <md-card  ng-repeat="project in projects">
          <img alt="user avatar" class="md-card-image" src="http://placehold.it/150x150" />
          <md-card-content>
            <h2>Title</h2>
            <p>body</p>
          </md-card-content>
          <div layout="row" class="md-actions">
            <md-button ng-click="timeline(project)">Timeline</md-button >
          </div>
        </md-card>
      </div>
      <ul ng-if="checkStatus()">
    Hello
  </ul>
    </div>
  </body>

控制器

var myApp = angular.module('MyApp')
myApp.controller('MyCtrl', function($scope, $http) { 
    //here we retrive the data, with the following format
      $scope.projects= [
           {
                "id": 1, 
                "start_date": "2014-03-09",
                "end_date": "2014-03-10" 
            },
            {
                "id": 2, 
                "start_date": "2014-03-10",
                "end_date": "2014-04-20" 
            }
         ];    
  });

以下是基于插件创建时间轴的方法。

var container = document.getElementById('timeline');

  var project = [
          //this data should come from angular
            {
                "id": 1, 
                "start_date": "2014-03-09",
                "end_date": "2014-03-10" 
            },
            {
                "id": 2, 
                "start_date": "2014-03-10",
                "end_date": "2014-04-20" 
            } 
         ]




  var items = new vis.DataSet(project); 

  function customOrder (a, b) {
    // order by id
    return a.id - b.id;
  }

  var options = {
    order: customOrder,
    editable: true,
    margin: {item: 0}
  }; 
  var timeline = new vis.Timeline(container, items, options);

单击按钮时，我想在JQuery函数中传递数据。任何人都可以告诉我如何做到这一点。感谢。

更新1

我使用了一个指令来初始化时间轴，就像建议的那样，但现在当我尝试将数据传递给它时，我收到以下错误：

VM317 angular.js:12330 Error: [$injector:unpr] Unknown provider: itemProvider <- item <- timelineCtrl

我无法弄清楚为什么会发生这种情况，这里是plunker！

更新2

发现错误。对于模态视图，不需要指定控制器。在html文件中删除它修复了错误。

在Angular

0 个答案: