在调用 $setViewValue 后使用 modelController.$render().这将更新 DOM 元素.

myApp.directive('myDirective', function($timeout) {返回 {要求:['ngModel', '?form'],链接:功能(范围，元素，属性，ctlrs){$超时(功能(){var modelController = ctlrs[0];modelController.$setViewValue('');modelController.$render();});}};});

更新小提琴 此处.

I have a select box with a blank option and some other options. The options are not generated with ngOptions directive, because they are generated on server side (with Symfony forms).

In some cases I want to unselect the selected value of the select box. So that the blank option is selected. But I cannot get this to work. The select box does not get updated.

I have created a jsfiddle to show the problem.

html

<div ng-controller="MyCtrl">
    <form name="form">
        <select ng-model="foo.hero" name="foo[hero]" my-directive="">
            <option value=""></option>
            <option value="1">Batman</option>
            <option value="2">Superman</option>
            <option value="3">Spiderman</option>
        </select>
    </form>
    <p>Selected: {{ foo.hero }}</p>
</div>

javascript

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

function MyCtrl($scope) {
    $scope.foo = {hero: '2'};
}

myApp.directive('myDirective', function($timeout) {
    return {
        require: ['ngModel', '?form'],
        link: function(scope, element, attrs, ctlrs) {
            $timeout(function() {
                var modelController = ctlrs[0];
                modelController.$setViewValue('');
            });
        }
    };
});

Use modelController.$render() after you call $setViewValue. This will update the DOM element(s).

myApp.directive('myDirective', function($timeout) {
    return {
        require: ['ngModel', '?form'],
        link: function(scope, element, attrs, ctlrs) {
            $timeout(function() {
                var modelController = ctlrs[0];
                modelController.$setViewValue('');
                modelController.$render();
            });
        }
    };
});

Updated fiddle here.