2

$scope の代わりにコントローラーをアプローチとして使用します。HTML からのメソッド呼び出しに問題があります。したがって、問題は、このアプローチで関数の宣言と呼び出しにいくつの方法が存在するかということです。

最初: (最初に s.th. を実行したい場合)

var vm= this ; 
vm.dataOne=[];

function funcOne() {
        myService.serviceFunc()
            .then(function (response) {
                vm.dataOne= response.data;
            });
    };
function activate() {
        funcOne();
        }
    activate();

2番目: (関数の戻り値に基づいて変数を初期化する場合) 

 vm.dataTwo = function () {
        doSomeThing();
 }
  • また、何か方法はありますか？

  • HTMLから呼び出されるコントローラーで関数を定義する方法は次のとおりです。

    ng-click = "ctrl.dataTwo()";
4

3 に答える 3

4

定義した関数は非公開です。

function functionOne() {

}; // Just function body, no need of semicolon

これらは関数宣言として知られています。現在、それらはコントローラー内でのみアクセスできます。

それらを呼び出せるようにするには、それらをコントローラーにアタッチして、コントローラー変数にします。

vm.functionOne = functionOne;

$scopeこのアプローチの利点は、またはを使用する方法とは対照的に、実際に関数を呼び出した後に関数を定義できることです$this。それらは、巻き上げによって認識され、呼び出されます。

関数からの戻り値の初期化については、次のように呼び出します。

vm.someVariable = someFunction();

参考文献:

var functionName = function() {} vs 関数 functionName() {}

JavaScript のプライベート メンバー

Angular 関数宣言、関数式、および読み取り可能なコード

Angular スタイル ガイド

于 2016-05-24T10:49:51.407 に答える
0

ng-controller="cntrl as vm" 構文を使用する最初の方法:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
  {{vm.name}}
</div>

</body>
</html>

ディレクティブの属性の 1 つとして controllerAs を使用する 2 番目の方法:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .directive('customDir', function() {
       return {
           restrict: 'EA',
           template: '<div>{{vm.name}}</div>',
           controller: function(){
               var vm = this;
               vm.name = 'Custom Directive';
           },
           controllerAs: 'vm'
       } 
   });
</script>
<body>

<div ng-app="MyApp">
  <div custom-dir></div>
</div>

</body>
</html>

コントローラーで定義されているがhtmlで呼び出される「コントローラーとして」構文で関数を呼び出す方法：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';

       vm.someFunction = function() {
         vm.name = 'Button is Clicked!!!';
       };
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
 {{vm.name}}
 <input type='button' ng-click="vm.someFunction()" value="Click" /> 
</div>

</body>
</html>
于 2016-05-24T10:42:05.127 に答える
0

他の方法では、コンストラクターとして関数を使用し、プロトタイプに機能を追加します

function Ctrl($window) {
  this.$window = $window;
}

Ctrl.inject = ['$window']

Ctrl.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('ctrl', Ctrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl as c'>
  <button ng-click='c.click()'>Click me!</button>  
</div>

于 2016-05-24T11:10:03.977 に答える