指令内的动态ng模型绑定

小编典典

指令内的动态ng模型绑定

angularjs

我正在尝试创建一个自定义组件，该组件使用从内而外的指令使用动态ng-model。

例如，我可以调用不同的组件，例如：

<custom-dir ng-model="domainModel1"></custom-dir>
<custom-dir ng-model="domainModel2"></custom-dir>

使用如下指令：

app.directive('customDir', function() {
  return {
    restrict: 'EA',
    require: '^ngModel',
    scope: {
      ngModel: '=dirValue',
    },
    template: '<input ng-model="dirValue" />',
    link: function(scope, element, attrs, ctrl) {
      scope.dirValue = 'New';
    }
  };
});

想法是，如果模型发生更改，则指令中的文本框将发生更改，反之亦然。

事实是，我尝试了不同的方法，但都没有成功，您可以在此处检查以下方法之一：http
:
//plnkr.co/edit/7MzDJsP8ZJ59nASjz31g?p=preview在此示例中，我希望获得这两个输入中的值均为“
New”，因为我正在从指令中更改模型，并且是双向绑定（=）。但是，某种方式并没有以正确的方式进行约束。:(

如果有人对此表示感谢，我将不胜感激。提前致谢！

阅读 221

2020-07-04

共1个答案

小编典典

像这样吗

http://jsfiddle.net/bateast/RJmhB/1/

HTML：

<body ng-app="test">
    <my-dir ng-model="test"></my-dir>
    <input type="text" ng-model="test"/>
</body>

JS：

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

2020-07-04