2017-08-28 17 views
-1

我跟隨John Papa's Angular 1 conventions,我試圖實現一個自定義指令,需要在鏈接功能中使用名爲$parse的角度服務,但該服務似乎不可用。AngularJS服務是undefined裏面的指示鏈接功能

uiSalesTotalDashboard函數被調用時,服務可用,但是當調用鏈接函數時,服務似乎是未定義的?

(function() { 
    'use strict'; 
    module.exports = uiDirectives.directive('uiSalesTotalDashboard', uiSalesTotalDashboard); 
    uiSalesTotalDashboard.$inject = ['$parse']; 

    function uiSalesTotalDashboard($parse) { 
     // $parse is available 
     var directive = { 
      scope: { 
       salesPeriods: '@', 
       translations: '@' 
      }, 
      link: link, 
      restrict: 'E', 
      templateUrl: '/Scripts/app/shared/ui/templates/sales-total-dashboard.html' 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      // $parse is undefined 
     } 
    } 
})(); 

我在做什麼錯?謝謝。

+0

你能創建一個小提琴重現呢? – lin

+0

變量不能在一個點中定義,在另一個點中未定義。你認爲這是什麼原因?如果您使用調試器對其進行了檢查,則後者是錯誤的。 – estus

+1

@estus它確實是顯示錯誤數據的調試器。當我沒有在鏈接函數中使用$ parse服務時,chrome調試器會顯示$ parse服務未定義。但是如果我在鏈接函數中聲明瞭$ parse,那麼chrome調試器就會正確顯示它。所以這必須是一個鉻調試器錯誤。謝謝! – Thunder

回答

0

我不確定你的代碼,目前還不清楚,因爲你沒有顯示你的角度模塊定義或者我覺得有什麼問題。 以下代碼工作。試着找出有什麼不同。不要擔心控制器部分,我添加它只是爲了確保我的示例代碼工作:)。由於

angular.module('sample', []) 
 
    .controller('sampleController', ['$scope',function($scope){ 
 
    $scope.title= 'I am sample controller'; 
 
    }]) 
 
    .directive('uiSalesTotalDashboard', uiSalesTotalDashboard); 
 
    
 
    uiSalesTotalDashboard.$inject = ['$parse']; 
 
    function uiSalesTotalDashboard($parse) { 
 
     var directive = { 
 
      scope: { 
 
       salesPeriods: '@', 
 
       translations: '@' 
 
      }, 
 
      link: link, 
 
      restrict: 'E', 
 
      template: '<p>I am directive</p' 
 
     }; 
 
     return directive; 
 

 
     function link(scope, element, attrs) { 
 
      // $parse is working in this code 
 
      console.log('----Printing $parse : ---'); 
 
      console.log($parse); 
 
     } 
 
    }
<!doctype html> 
 
<html ng-app="sample"> 
 
    <head> 
 
    <title>My AngularJS App</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    </head> 
 
    <body ng-controller="sampleController"> 
 
    <h1>{{title}}</h1> 
 
    <ui-sales-total-dashboard></ui-sales-total-dashboard> 
 
    </body> 
 
</html>