anglejsのコントローラの中で通常のjavascript関数を定義する方法

Question

私は以下のコードスニペットを持っています。ここで

sample.js

(function() { 
    /*global angular */ 
    'use strict'; 

    angular.module('myapp', ['spinner']) 
     .controller('myCtrl', ['$scope', '$window', function ($scope, $window) { 

    $scope.methodname = function() { 
      if(something){ 
       /* Doing some operations */ 
      } 
    }; 
    /* Here I need to define the callme javascript function */ 

    function callme(response){ 
     /* If I call like this, I'm getting error in console. */ 
    } 

    }]); /* Controller ends here */ 

    /* Creating a new anonymous function to perform some operations */ 
    (function() { 
    'use strict'; 


    /* Edited */ 
    code.util.myHTTP(url, function (response) { 

      // Adding response to session storage 
      callme(response); 

      }, function() { 
       // Removing from session storage 
     }); 

     })(); 
    }()); 

、私は角度のコントローラ内部でcallme javascript関数を呼び出すことができません。コンソールのようにエラーが表示されます

Uncaught ReferenceError: callme is not defined 

これを達成する方法はありますか？

私はcallme関数の中で$ windowのようないくつかのコントローラパラメータを使う必要があります。そのため、コントローラ内にcallme関数を定義しています。

私は私のjsファイル内の関数を実行している私の要件は、コール匿名関数のようなものですすでに

.run(function($rootScope, $log, $window) { 
}); 

以下のように、いくつかのAPIレスポンスがあるだろう負荷に、私は応答を処理するための一つの方法を呼び出す必要があります。これらのコントローラパラメータのために、私はコントローラの中に自分のメソッドを定義したかったのです。これを達成する別の方法がありますか？

Answer 1

あなたのインデントはすべて場所を超えており、このコードを理解しにくいものです。 function宣言はその範囲の先頭にを掲揚しているが、その範囲の外に存在しないため、ここではあなたの正しい形式のコードが...

(function() { 
    /*global angular */ 
    'use strict'; 

    angular.module('myapp', ['spinner']) 
    .controller('myCtrl', ['$scope', '$window', function ($scope, $window) { 
     $scope.methodname = function() { 
     if (something) { 
      /* Doing some operations */ 
     } 
     }; 
     /* Here I need to define the callme javascript function */ 

     function callme (response) { 
     /* If I call like this, I'm getting error in console. */ 

     } 
    }]); /* Controller ends here */ 

    /* Creating a new anonymous function to perform some operations */ 
    (function() { 
    'use strict'; 

    /* Edited */ 
    code.util.myHTTP(url, function (response) { 

     // Adding response to session storage 
     callme(response); 
    }, function() { 
     // Removing from session storage 
    }); 
    })(); 
}()); 

だこれが動作しない理由があります。

(function() { 
    function MyController($scope) { 
    $scope.methodname = function() {} 

    function callme(response) { 
    } 
    } 

    (function() { 
    callme() 
    }()) 
}()) 

callmeはだけMyControllerの先頭に、掲揚されています。私たちはいくつかの嫌なものを削除した場合、これはあなたのコードはに簡素化するものです。そのシンボルはそのスコープの外には存在しません。そのため、ネストされたスコープ内でcallme()を実行できません。

あなたがしていることは、アンチパターンのようです。これを達成できたとしても、core.util.myHTTPはAngularダイジェストサイクルでは実行されないので、コントローラの内部で$scope.$applyに電話する必要があります。これは一般的には悪いことです。単に$httpを代わりに使用するのはなぜですか？それでも

、あなた本当にはこれをしたい場合はそのように（とそうでない）、あなたはあなたの関数を定義することができます。

(function() { 
    function callme(response) { } 

    function MyController($scope) {} 

    (function() { 
    ... 
    callme() 
    }()) 
}()) 

また、あなたに応じて、ディレクティブ（またはコンポーネントを使用することができますこれを代わりに処理するために、どのようにしなければならないかということです。

function SpinnerCtrl($http) { 
    this.$http = $http 
} 
SpinnerCtrl.$inject = ['$http'] 
SpinnerCtrl.onInit = function onInit() { 
    var that = this 
    return this.$http.get(url) 
    .then(function (response) { 
     // Store it in session storage, do whatever. 
     // Presumably there's some data you want to make accessible to other parts of the app, so I assign it to the controller here 
     that.response = response 
    }) 
} 

angular.module('myapp', ['spinner']) 
    .component('spinner', { 
    controller: SpinnerCtrl, 
    template: '<h1>{{ $ctrl.response }}</h1>' 
    }) 

// or 

function SpinnerCtrl($scope, $http) { 
    return $http.get(url).then(function (response) { 
    $scope.response = response 
    }) 
} 

angular.module('myapp', ['spinner']) 
    .directive('spinner', function() { 
    return { 
     controller: SpinnerCtrl, 
     template: '<h1>{{ response }}</h1>' 
    } 
    }) 

本当にあなたはサービスへの$ http呼び出しを移動してそこのセッション記憶域も処理する必要があります。セッション記憶は実装の詳細であり、それを使用するコンポーネント/指令は気にするべきではありません。私は簡潔さのためにそれをしていない。