Question

我有一个ng-repeat，里面有一个调用控制器方法的按钮。我正在使用基于Ionic Framework的{{1}} 我不能让按钮实际触发控制器方法，除非我恢复使用普通的Angular（或者我将在稍后展示的另一个变体）。

我可以看到破碎情况的例子here in jsfiddle。

您可以看到红色按钮工作（生成警报），而AngularJS内部的绿色没有，而它正在调用完全相同的控制器功能。

这是控制器代码：

ng-repeat

和页面布局：

angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {

var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;

$scope.doSomething = function() {
  alert("clicked");
};

function addOptionToArray(optionText) {
  answers.push({text : optionText});
} 
}]);

现在有两个方法可以使<div ng-app="todoApp"> <div ng-controller="TodoController"> <button class="button button-assertive" ng-click="doSomething()"> <i class="icon ion-minus-circled"></i> </button> <label class="item item-input item-button-right" ng-repeat="answer in answers"> <input type="text" ng-model="answer.text"> <div class="buttons"> <button class="button button-balanced" ng-click="doSomething()"> <div>click</div> </button> </div> </label> </div> </div>内的按钮再次工作

将ng-repeat捆绑JS引用替换为纯``AngularJS'，可以看作here in jsfiddle
在保留Ionic JS参考时，移除Ionice中的<input>'，然后jsfiddle

了解为什么ng-repeat内的<input>会破坏按钮的ng-repeat？或者ng-click中的内容是什么？

Answer 1

您的问题在于内联元素中的块元素。不要将<div>放在<button>或<label>内。修复它并按预期工作：

<div ng-app="todoApp">
    <div ng-controller="TodoController">
        <a href="#" class="button button-assertive" ng-click="doSomething()"><i class="icon ion-minus-circled"></i></a>
        <div class="item item-input item-button-right" ng-repeat="answer in answers">
            <input type="text" ng-model="answer.text" />
            <div class="buttons">
                <a href="#" class="button button-balanced" ng-click="doSomething()">Click</a>
            </div>
        </div>
    </div>
</div>

使用ng-repeat的奇怪的离子框架行为

1 个答案: