Angularネストされた関数を呼び出す

Question

Angularでネストされた関数を呼び出そうとしています。私はコードを整理するためにこのような方法で関数の書式を設定しましたが、ng-clickで関数を呼び出すと機能しないようです。

私の場合は、変数名がローカルスコープによって取得されるため、スコープの競合が発生するため、コントローラの名前をコントローラの子プロパティとして呼び出せましたが、成功しませんでした。 https://jsfiddle.net/838L40hf/16/

HTML：：

<div class="InviteAppContainer" ng-app="InviteApp"> 
    <div ng-controller="InviteController as cntrl"> 
     <button ng-click="alert()"> 
     Alert, standard 
     </button> 

     <div ng-repeat="invite in invites"> 
     <button ng-click="cntrl.invite.alert(invite.name)"> 
      Alert, {{invite.name}} 
     </button> 
     </div> 
    </div> 
</div> 

JS：

var InviteApp = angular.module('InviteApp',[]) 
.controller('InviteController', function($scope) { 
    $scope.invites = { 
    0 : { 
     "name":"invite 1", 
     }, 
    1 :{ 
     "name" : "invite 2" 
     } 
    }; 

    $scope.invite = { 
    alert : function(name) { 
      alert(name); 
    } 
    }; 

    $scope.alert = function() { 
     alert("alert2!"); 
    }; 
}); 

Answer 1

var InviteApp = angular.module('InviteApp',[]) 
 
.controller('InviteController', function($scope) { 
 
\t $scope.invites = { 
 
    \t 0 : { 
 
    \t "name":"invite 1", 
 
\t \t }, 
 
    1 :{ 
 
    \t "name" : "invite 2" 
 
\t \t } 
 
    }; 
 

 
\t $scope.invite = { 
 
    \t alert : function(name) { 
 
\t \t \t alert(name); 
 
    \t } 
 
    }; 
 

 
\t $scope.alert = function() { 
 
\t \t alert("alert2!"); 
 
\t }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="InviteAppContainer" ng-app="InviteApp"> 
 
    \t <div ng-controller="InviteController as cntrl"> 
 
     <button ng-click="alert()"> 
 
     Alert, standard 
 
     </button> 
 
     
 
     <div ng-repeat="i in invites"> 
 
     <button ng-click="invite.alert(i.name)"> 
 
      Alert, {{i.name}} 
 
     </button> 
 
     </div> 
 
    </div> 
 
</div>

を

私は私が何を意味するかを証明するためにjsfiddleを作成しました私が編集何210

：あなたはエイリアスコントローラ名を介してそれらにアクセスしたい場合

<div ng-repeat="i in invites"> 
    <button ng-click="invite.alert(i.name)"> 
     Alert, {{i.name}} 
    </button> 
</div> 

Answer 2

あなたがcontroller as構文を使用している場合は、あなたがthis代わりの$scopeへの結合のものでなければなりません。

$scope.inviteからthis.inviteにバインドを変更するだけで、このトリックが実行されます。おそらく親スコープをターゲットにする方法があった場合

https://jsfiddle.net/pL4wc10n/

Answer 3

あなたの周りの仕事として働くthis

Javascriptを

var InviteApp = angular.module('InviteApp',[]) 
    .controller('InviteController', function($scope) { 
    // controllerAs : cntrl 
    var that = this; 

    $scope.invites = { 
    0 : { 
     "name":"invite 1", 
    }, 
    1 :{ 
     "name" : "invite 2" 
    } 
    }; 
    // USING THIS you have cntrl.function 
    that.invite = { 
    alert : function(name) { 
     alert(name); 
    } 
    }; 

    $scope.alert = function() { 
    alert("alert2!"); 
    }; 
});