Angular指令更新父控制器对象

Angular Directive updating Parent Controller Object

本文关键字:控制器 对象 更新 指令 Angular      更新时间:2023-09-26

我已经使用Angular有一段时间了,但是当涉及到控制器(使用控制器作为语法)和该控制器模板内的指令之间的双向数据绑定时,我有点迷失了。

该指令的目的本质上是一个输入字段,用于我需要收集的一组非常特定的数据(照片,文本和其他一些东西)。

如何工作。

我的控制器FormCtrl从应用缓存加载一些数据。然后将该数据传递给一个名为ctrl.form_fields的对象。

我需要我的指令能够访问ctrl。Form_fields显示数据。此外,如果在指令中对数据进行了任何更改,则使用FromCtrl ctrl。Form_fields对象被更新。

我对父控制器和子指令之间的双向绑定做了一些研究和实验,但我不能弄清楚。如果有人可以张贴一个理论的例子,我真的很感激。

我不想使用$scope。美元的父母等等……要做到这一点,因为它会变得太混乱和难以维护。另外,我尽量不使用$作用域。

欢呼,院长

也许我没有正确理解你的问题,但是你不能通过属性将对象/值传递给指令,并使用双向绑定表达式吗?

angular
  .module('app')
  .directive('myDirective', function() {
    return {
     restrict: 'E',
     templateUrl: 'myTemplate.html',
     scope: {
       obj: "=" // Two way decleration  
     },
      
     controller: function($scope) {
       console.log($scope.obj); 
     }
   }
  });
<my-directive obj="ctrl.object"></my-directive>

指令的(部分)示例:

controller: FooController, // import FooController as './foo.controller';
controllerAs: 'vm',
replace: true,
scope: {
  fields: '=formFields'
},
template: '<input type="text" ng-model="fields" />'

然后在你的控制器中,你可以使用引用'vm.fields'。你的输入字段应该是:

<input type="text" form-fields="fields" />

我还没有测试过