Простое изменение ng не работает должным образом в angularjs

Мне может не хватать чего-то глупого, поскольку этот простой код работает не так, как ожидалось. Что не так, функция $scope.change в MainCtrl не работает (окно предупреждения не появилось).

Вкратце, вид (это в нефрите, лучше просмотреть?)

<body ng-app="epfApp">
...
label(ng-repeat="question in questions")
    | {{ question.title }}
    input(type="{{question.type}}", ng-change="change()")

и в файле контроллера

angular.module('epfApp')
.controller('MainCtrl', function ($scope, $window) {

    $scope.questions = {
        '1': {
                'title': 'The first question is?',
                'type': 'text',
                'placeholder': 'first question'
            },

        '2': {
                'title': 'The second question is?',
                'type': 'text',
                'placeholder': 'second question'
            }
    };

    $scope.change = function() {
        $window.alert('text');
    };

});

И маршрут:

$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  });

Теперь то, что он делает правильно, состоит в том, что он правильно заполняет представление с помощью созданных данных (т.е. вопросов json). Однако, что он не делает правильно, функция change(), связанная с текстовым полем ввода, не работает.

Что мне здесь не хватает? Это, очевидно, очень простая работа.

Ответы

Ответ 1

ng-change требует ng-model.

<div ng-controller="MainCtrl">
    <label ng-repeat="question in questions">
        {{question.title}}
        <input type="{{question.type}}" ng-model="question.placeholder" ng-change="change()" />
        <br />
    </label>
</div>

Проверьте этот JSFiddle.

Ответ 2

ng-change не работает, но работает, если вы определяете ng-model = "yourValue"... как это

<select id="editSelect" ng-model="Option" ng-change="okChange()" name="Option">
    <option ng-repeat="data in Option" value="{{data.Option}}">{{data.Option}}</option>
</select>

Ответ 3

<div ng-app ng-controller="myCtrl">
<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage()" />
<ul>
   <li ng-repeat="item in uploadcollection">
     {{item.name}}  ({{item.size}})
   </li>
</ul>

function myCtrl($scope) {
    $scope.uploadImage = function () {
        $scope.uploadcollection.push({name: "Income.pdf", size: "10mb"});
        $scope.$apply();
}
$scope.uploadcollection = [{name: "Income.pdf", size: "10mb"}, {name: "Expense.pdf", size: "1.5mb"}];
}

Здесь я создал демо: http://jsfiddle.net/fA968/120/

ПРИМЕЧАНИЕ: Этот пример не работал с v1.4.8: https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

Обновление Вот простой способ сделать это:

var myApp = angular.module('myApp', []);
myApp.directive('customOnChange', function() {
return {
 restrict: 'A',
 link: function(scope, element, attrs) {
   var onChangeFunc = scope.$eval(attrs.customOnChange);
      element.unbind('change').bind('change', function(e) {
        onChangeFunc(e);
      });
   }
  };
});

Здесь - обновленный Fiddle