Call Угловые вложенные функции

Question

Я пытаюсь вызвать вложенную функцию в угловом. Я отформатировал функции таким образом, чтобы аккумулировать код, но при вызове функции через ng-click он, похоже, не работает.

В моем случае возникает конфликт областей, поскольку имя переменной берется локальной областью, поэтому я назвал контроллер и вызвал его как дочернее свойство контроллера, но не успел.

Я создал jsfiddle, чтобы продемонстрировать, что я имею в виду: 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>

Что я редактирую:

<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!"); 
    }; 
});