Question

我正在学习角度并尝试使用控制器，但是ng-click不起作用（该函数未被调用）。 chrome扩展Batarang告诉函数被定义为null，为什么？

angular.module('starter', ['ionic'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})


.controller("TodoControl", function Controller() {
    var thisRef = this;

    this.todos = [
        {
            text: "mein todo 1",
            done: false
        },
        {
            text: "mein todo 2",
            done: true
        }
    ];

    this.newEntry = "hallo";

    this.AddEntry = function () {
        console.log("adding");
        thisRef.todos.push({
            text: this.newEntry,
            done: false
        });
        thisRef.newEntry = "";
    }

});

<body ng-app="starter">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content>
            <div ng-controller="TodoControl as ctr" class="container">
                <form role="form">
                    <div class="form-group" ng-repeat="t in ctr.todos">
                        <div class="checkbox">
                            <label class="checkbox-inline">
                                <input class="form-control todoFormControl" type="checkbox" ng-model="t.done"><span>{{t.text}}</span></label>


                        </div>
                    </div>
                </form>
                
                
                <label><input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" ><button class="button" ng-click="ctr.AddEntry()">Add</button></label>
                
            </div>
        </ion-content>
    </ion-pane>
</body>

这是一个离子应用程序（因此包括角度的离子）

编辑：这里有一个小提琴：http://jsfiddle.net/duowfLsn/

Answer 1

将按钮移出该部分，它应该可以正常工作。更新了您的示例

<label>
<input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" >
<button class="button" ng-click="ctr.AddEntry()">Add</button>
</label>

变为

<label>
<input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" />
</label>
<button class="button" ng-click="ctr.addEntry()">Add</button>

http://jsfiddle.net/duowfLsn/3/

用它来定义角度函数

1 个答案: