2017-08-28 18 views
-1

私はJohn Papa's Angular 1 conventionsに従っていますが、リンク機能で$parseという角度サービスを使用する必要があるカスタムディレクティブを実装しようとしていますが、サービスが利用できないようです。ディレクティブリンク関数内でAngularJSサービスが未定義

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を宣言すれば、クロムデバッガはそれを正しく示しました。これはクロムデバッガのバグでなければなりません。ありがとう! – 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>

関連する問題