Angular-UI ui-keypress not working

StackOverflow https://stackoverflow.com/questions/13977940

Frage

I'm having trouble getting even a simple use of angular-ui up and running. I want to be able to easily detect keypresses, for instance, to automatically add an item after pressing enter in a text box without having to press an Add button.

Here's my current attempt:

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Main</title>
  <link rel="stylesheet", href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" />
</head>
<body ng-controller="Ctrl">
  <button ng-click="add()">Add</button>
  <input type="text" ui-keypress="{enter: 'add()'}" />
  {{item}}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js">    </script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
  <script src="main.js"></script>
</body>
</html>

var myApp = angular.module('myApp', ['ui.directives']);

function Ctrl($scope) {
  $scope.item = "";

  $scope.add = function () {
    $scope.item = "Item Added";
  }
}

You can see the behavior here: http://jsfiddle.net/NbjZL/5/. Note that clicking the button after typing text works, but pressing enter after typing text does not. I've read what documentation I can find and have looked at several examples, but I'm sure I'm still missing some small thing.

War es hilfreich?

Lösung

Angular ui was not able to find the angular app. All you need to do is to specify the app name in ng-app to get it working.

<html ng-app="myModule" xmlns="http://www.w3.org/1999/xhtml">

Check the js fiddle to see the code work

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top