在 ng-model 中以一种方式绑定的两个输入

Question

我尝试制作一个有两个输入文本（比如 parent 和 child）的应用程序，每个都有 ng-model .

我想让它成为一种绑定方式，也就是说，parent 输入中的更改应该在 child 中显示相同的值，而 child 输入中的更改不会'不会影响 parent 。

请尽量将其作为Angular解决方案（避免按键事件..）

到目前为止，这是我的代码，parent 中的更改会导致 child 中的更改，但一旦我输入 child -[=14=，它就会破坏绑定]

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) {
          }
         }
     })

<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>

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

与指令绑定的一种方式

这是从上面一个创建的。但是这个例子没有使用 DOM access 。它是纯 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 3

您可以简单地在 ng-keypress（在父级）上更新您的 "child" 模型：

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 4

我会改用 ngModelController。

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);
                  };
               }
           }
        })

<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>

在 ng-model 中以一种方式绑定的两个输入

Two inputs with one way binding in ng-model

javascript

angularjs

angularjs-directive

angularjs-scope

angular-ngmodel