angularjs - 将占位符绑定到模型会导致 ng-change 在 IE 中加载时执行

Question

使用 angularjs，如果我将输入的占位符绑定到其模型，则在 IE 中加载文档时会触发更改事件。这似乎不正确，我在其他浏览器中没有看到这种行为。

JS小提琴

html:

<div ng-app="angularjs-starter" data-ng-controller="MainCtrl">
<div data-ui-view="viewMain">
    <input 
    placeholder="{{theValue}}" 
    data-ng-model="theValue" 
    data-ng-change="valueChanged(theValue)" />            
</div>

Javascript：

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {  
    $scope.valueChanged = function(theValue) {
        alert("Value Change Called On Load in IE.");
    };
});

Answer 1

也可以使用内置ng-attr-placeholder指令。

ng-attr-placeholder="{{theValue}}" 

Answer 2

我知道这是旧的，但以防万一其他人遇到这种情况，我创建了一个小指令，将动态值放在占位符中，而不是在它更改时分配：

.directive('dynamicPlaceholder',
    function() {
        return {                
            restrict: 'A',
            link: function ($scope, element, attrs) {
                attrs.$observe('dynamicPlaceholder', function(value) {
                    element.attr('placeholder', value);
                });
            }
        };
    });

然后要使用它，您需要做的就是使用dynamic-placeholder而不是placeholder：

<input ng-model='someValue' dynamic-placeholder='{{someDynamicPlaceholder}}' />

虽然不确定是什么导致了 IE 中的问题