Question

this fiddle中的代码似乎运行了两次。

它是一个相对简单的AngularJS应用程序，它定义了一个控制器，其中一个keyup侦听器绑定到一个输入的enter键，只要它将$ scope.newTag中的字符串添加到$ scope.tags数组中按压。

当我运行代码时，预期结果最初是：

tag1, tag2

但相反，我得到了：

tag1, tag1, tag2, tag2

观察控制台还确认了代码运行两次的事实：

Controller checking in...
Controller checking in...

HTML

<div ng-app="myApp">
    <div ng-controller="tagsCtrl">
        <div ng-click="editTags = true;"> <span ng-repeat="tag in tags">{{tag}}, </span>

            <br/>
            <input type="text" ng-show="editTags" ui-keypress="{enter:'keypressCallback($event, doc)'}" ng-model="newTag" />
        </div>
    </div>
</div>

控制器

var myApp = angular.module("myApp", ["ui.utils"]);

var tagsCtrl = function ($scope) {
    console.log("Controller checking in...");
    $scope.tags = ["tag1", "tag2"];
    $scope.newTag = "";

    $scope.keypressCallback = function ($event) {
        var tagToAdd = $scope.newTag;
        if (tagToAdd === "") {
            $event.preventDefault();
        } else {
            $scope.tags.push(tagToAdd);
            $scope.newTag = "";
            $event.preventDefault();
        }
    };
};

myApp.controller('tagsCtrl', tagsCtrl);

Answer 1

感到惊讶的是没有冲突，但是AngularJS被定义了两次。一旦进入框架＆amp;延伸，一次在外部资源中。

Taking one out seems to fix the problem.

http://jsfiddle.net/jj35xkp9/3/

JSFiddle两次运行Angular代码

HTML

控制器

1 个答案: