角度应用程序有两个几乎相同的指令 - 一个指令工作一个没有

时间:2015-07-05 05:24:24

标签: javascript angularjs

我有一个角度应用程序,其中有两个指令几乎彼此相同。一个显示完美。另一个根本没有显示。我的浏览器中没有出现javascript错误。

以下是以下的提炼代码。 time-series-chart指令工作正常。 data-box指令不做任何事情。

拔掉我的头发 - 不知道我在这里失踪了什么。

plunker:http://plnkr.co/edit/qYXWS7TXrKUS2y1grxTp?p=preview

编辑:Jan的答案是对的。 data-以角度保留。在plunker中,我将其重命名为value-box并将其修正了。

   <div>
      <time-series-chart key="keyForChartABC"></time-series-chart>
      <hr>
      <time-series-chart key="keyForChartXYZ"></time-series-chart>
      <hr> 
      <!-- this one is broken ! -->
      <data-box key="keyForDataBox"></data-box>
  </div>

脚本

angular.module('myApp', ['ChartController', 'DataBoxController'])
  .controller('ParentCtrl', ['$scope',
    function($scope) {
      $scope.keyForChartABC = "somekey1";
      $scope.keyForChartXYZ = "somekey2";
      $scope.keyForDataBox = "dbkey";
    }
  ])
   // this one is broken
   .directive('dataBox', function() {
    return {
        restrict: 'E',
        scope: {
            key: '='
        },
        templateUrl : 'databox.html',
        controller: 'DataBoxController',
        controllerAs: 'dbctrl',
        bindToController: true
    }
})
   // this one works fine
  .directive('timeSeriesChart', function(){
    return {
      restrict: 'E',
      scope: {
        key: '='
      },
      templateUrl : 'chartwidget.html',
      controller: 'ChartController',
      controllerAs: 'ctrl',
      bindToController: true
    }
});

  // this one doesn't work
  angular.module('DataBoxController', [])
  .controller('DataBoxController', function($scope, $http, $rootScope){
    $scope.didIGetIt = this.key;
    $scope.lastValue = Math.random() * 1000;

    console.log(this.key);
  });
  // this works
  angular.module('ChartController', [])
  .controller('ChartController', function($scope, $http, $rootScope){
    $scope.didIGetIt = this.key;
    $scope.lastValue = Math.random() * 1000;

    console.log(this.key);
  });

1 个答案:

答案 0 :(得分:2)

您正在命名一个data-指令-- It returns rows from Query A which "doesn't exist in" Query B SELECT first_name, last_name FROM users WHERE rating <> '6' EXCEPT SELECT DISTINCT first_name, last_name FROM users JOIN mp_positions ON users.id=mp_positions.user_id JOIN mps ON mps.id=mp_positions.mp_id WHERE mps.status_id = '5';

将其重命名为其他内容并且可以正常工作。

reserved name for angular