调用Angular嵌套函数

我想调用Angular中的嵌套函数。我已经以这种方式格式化了函数，以便更新代码，但是在通过ng-click调用函数时，它似乎不起作用。调用Angular嵌套函数

在我的情况下，发生范围冲突是因为变量名是由本地范围取得的，因此我已命名控制器并将其作为控制器的子属性进行调用，但未成功。

我创建了一个的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!"); 
    }; 
});

来源

2016-11-15 kirgy

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>

来源

2016-11-15 14:21:40

感谢，围绕工作作为工作，但我想知道如果有办法也许目标父范围的方式？ – kirgy

@kirgy我不知道你为什么想这样做，但它似乎更短的语法。我建议使用'object.function_name'而不是'controller.object.function_name' –

原因与你想在任何JS函数 - 范围冲突中使用parent.variable的原因相同。 – kirgy

如果您使用的controller as语法，你应当具有约束力的东西，而不是this的$scope如果你想通过别名控制器名称来访问它们。

只需将绑定从$scope.invite更改为this.invite即可。

https://jsfiddle.net/pL4wc10n/

来源

2016-11-15 14:22:30 miqid

您应该使用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!"); 
    }; 
});

来源

2016-11-15 14:26:39 gianlucatursi

调用Angular嵌套函数

回答

相关问题