当前位置: 首页 > 面试题库 >

指令内的动态ng模型绑定

鲜于宜修
2023-03-14
问题内容

我正在尝试创建一个自定义组件,该组件使用从内而外的指令使用动态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”,因为我正在从指令中更改模型,并且是双向绑定(=)。但是,某种方式并没有以正确的方式进行约束。:(

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


问题答案:

像这样吗

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


 类似资料:
  • 问题内容: 我试图在类型文件的输入标签上使用ng-model: 但是选择文件后,在控制器中,$ scope.vm.uploadme仍未定义。 如何在控制器中获取所选文件? 问题答案: 我使用指令创建了一种解决方法: 输入标签变为: 或者,如果仅需要文件定义:

  • 问题内容: 我正在构建一个简单的angularjs应用,并且试图实现无需页面刷新的登录。 我在做什么 初始化时,ng-include会加载/ set / save。/ set / save 中有。因此,当单击指令时,将打开一个窗口,并且当关闭窗口时,应更改ng-include的src。 问题 当指令在ng-include内部使用时(ng-include src在init上具有默认值)时,什么都不会

  • 问题内容: 我正在尝试从对象数组生成一组复选框。我的目标是使复选框动态地将其ng模型映射到将要提交到数组中的新对象的属性。 我的想法是 在此JSFiddle上可以看到,这不起作用: http://jsfiddle.net/GreenGeorge/NKjXB/2/ 有人可以帮忙吗? 问题答案: 这应该给您想要的结果: 这是工作正常的小伙伴:http ://plnkr.co/edit/ALHQtkji

  • 问题内容: 我有一张桌子,其中的行通过重复。我正在尝试创建一个模板,为每一行生成列 问题是我的自定义td模板根本没有呈现。在这里,我打算用n个s 代替- 这将根据我的数据对象上的属性数量来确定,但是目前,我只是试图获得一个简单的指令,该指令将输出两列。 MYPLUNKER:显示此问题的一个实例和指令代码。 问题答案: 如注释中所指出,指令模板应具有单个根元素。因此,我建议您将元素移动到指令的模板,

  • 问题内容: 我花了一段时间试图找到一个优雅的解决方案,而我却找到了一个“可行”的解决方案,它感觉不是最简单或正确的做事方式。 所以,我的问题是…如何动态加载指令!在某些情况下,以下是我希望我能摆脱它的方式!除了模板加载之外,我没有包含路由或其他任何内容,而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激,如果我做任何明

  • 问题内容: 我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令,但是我对如何将ng-transclude与ng- repeat指令结合起来感到迷茫。有人可以让我走上正轨吗? HTML: Javascript: 我已经在这里工作了一部分 编辑: 条件: 该项目的模板必须在视图中定义,而不是在指令中定义,并且必须有权访问子作用域中的项目属性。理想情况下,我想像在ng-repeat指令中那