Question

我尝试创建一个有两个输入文本的应用程序（比如父和子），每个都有ng-model。

我想让它成为一种绑定方式，意思是，父输入中的更改应该在子节点中显示相同的值，并且子输入中的更改不会影响父节点。

请尝试将其作为Angular解决方案（避免关键事件..）

到目前为止，这是我的代码，更改了父级原因以改变孩子，但是一旦我输入孩子，它就会破坏绑定 -

＆＃13;

var myAppModule = angular.module('myApp', []) 
		.controller('myCtrl',function ($scope) {
			$scope.myText = "Type your text"
        	
    	})
    	.directive('myDrtv',function () {
        	return {
        		restrict: 'A',
        		scope: {
        			myText: '='/* =/@/&*/
        		},
        		template: "<input type='text' ng-value='myText' style='margin-left:64px'>",
        		link: function(scope, element, attrs) {
        		}
        	}
    	})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
		<input type="text" ng-model="myText">
		<div my-drtv my-text="myText"/>
	</div>

＆＃13;

Answer 1

您可以设置观察者手动设置第二个输入值：

.directive('myDrtv', function() {
    return {
        scope: {
            myText: '='
        },
        template: "<input type='text'>",
        link: function(scope, element, attrs) {
            var input = element.find('input');
            scope.$watch('myText', function(newVal) {
                input.val(newVal);
            });
        }
    }
});

演示：http://plnkr.co/edit/60ZQHZQq14A6qkUxbTRO?p=info

Answer 2

您可以简单地更新您的孩子＆＃34; ng-keypress上的模型（在父级上）：

JS：

var myAppModule = angular.module('myApp', []) 
    .controller('myCtrl',function ($scope) {
        $scope.myText = "Type your text"
        $scope.myChildText = $scope.myText;
        $scope.updateChildText = function (){
          $scope.myChildText = $scope.myText;
        }
    })
    .directive('myDrtv',function () {
        return {
            restrict: 'A',
            scope: {
                myText: '='/* =/@/&*/
            },
            template: "<input ng-model="myChildText" type='text' style='margin-left:64px'>",
            link: function(scope, element, attrs) {
            }
        }
    });

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-keypress="updateChildText" ng-model="myText">
    <div my-drtv my-text="myText"/>
</div>

Answer 3

单向绑定指令

这是从上面创建的。但是这个例子没有使用DOM访问。它是纯粹的angularjs代码。它可能会帮助你。

实时代码http://plnkr.co/edit/hs7VTZfHmvMcVv5nHLCE?p=preview

app.directive('myDrtv', function() {
    return {
        scope: {
            myText: '='
        },
        template: "<input type='text' ng-model='myChild'>",
        link: function(scope, element, attrs) {
            scope.$watch('myText', function(newVal) {
               scope.myChild = scope.myText;
            });
        }
    }
});

Answer 4

我会改用ngModelController。

＆＃13;

var myAppModule = angular.module('myApp', []) 
		.controller('myCtrl',function ($scope) {
			$scope.myText = "Type your text"
        	
    	})
    	.directive('myDrtv',function () {
           return {
               scope: {
                   myText: '='
               },
               template: "<input type='text' ng-value='myText' style='margin-left:64px'>",
               require: '?ngModel', // get a hold of NgModelController
               link: function(scope, element, attrs, ngModel) {
                  var input = element.find('input');
      
                  ngModel.$render = function() {
                    input.val(ngModel.$viewValue);
                  };
               }
           }
        })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
		<input type="text" ng-model="myText">
		<div my-drtv ng-model="myText"></div>
	</div>

＆＃13;

在ng-model中使用单向绑定的两个输入

4 个答案: