Question

问题很简单 - 为什么这项工作会像这项工作一样？

＆＃13;

angular.module('test1', [])
    .directive('myDir', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<input type="text">',            
        };
    }).directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text"></div>',            
        };
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test1">
    <my-dir ng-model="test"></my-dir>
    <nogo ng-model="test"></nogo>
    <input type="text" ng-model="test"/>
</body>

＆＃13;

两个指令之间的唯一区别是第二个模板包含了＆＃39; div＆＃39;。

但是一项工作，另一项工作并没有。

真的 - 我不明白 - 为什么要开始工作。但确实如此。

Answer 1

问题是ng-model对div不起作用。

改变：

.directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text"></div>',            
        };
    });

到

.directive('nogo', function() {
    return {
        replace:true,
        restrict: 'E',
        template: '<div><input ng-model='test' type="text"></div>',            
    };
});

别忘了从<nogo>*remove ng-model*</nogo>删除ng-model 它正在运作..

Answer 2

您的问题是，您正在将模型应用于<div>，here is another question，并提供有关此问题的详细信息。

在这种特殊情况下，您可以将绑定更改为模板以使其正常工作。

angular.module('test1', [])
    .directive('myDir', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<input type="text">',            
        };
    }).directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text" ng-model="test"></div>',            
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test1">
    <my-dir ng-model="test"></my-dir>
    <nogo ng-model="test"></nogo>
    <input type="text" ng-model="test"/>
</body>

同样在ng-model文档上说：

ngModel指令绑定输入，select，textarea（或自定义表单控件）

angularJS和ng-model奇怪的行为

2 个答案: