将AngularJS指令的控制器作用域值更改

Question

我有一个条件，其中在列表网格中有输入框和单个指令，现在我想将值发送到这个指令，无论输入值是什么。到目前为止，它工作得很好，但是现在当我尝试从指令输入框更改值时，它不会更新列表网格输入框，为其设置指令值。
这里是一个有效的plnkr，请告诉我我做错了什么。

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

我的控制器和指令代码如下 -

var myApp = angular.module('myApp', []);

myApp.controller('mainCtrl', function(){
  var vm = this;

  vm.fordirective = '';

  vm.list = [
    {id: "1", name: 'Test 1', age: 35},
    {id: "2", name: 'Test 2', age: 36},
    {id: "3", name: 'Test 3', age: 37},
    {id: "4", name: 'Test 4', age: 38},
  ];
})

myApp.directive('testdir', function(){
  return {
    restrict: 'EA',
    scope: {
      directivevalue: "="
    },
    templateUrl: 'dirtemplate.html',
    link: function(scope, elem, attrs) {

    }
  };
})

- Tech Solvr

Answer 1

您可以设置 vm.fordirective 为指向 item 的对象引用：

然后，testdir 需要以某种方式知道从 item 中使用哪个字段作为模型值。例如，我们可以使用帮助属性：

<testdir directivevalue="vm.fordirective" field="age">Loading..</testdir>

最后，在指令模板中，您需要绑定到 directivevalue[field]：

<input type="text" ng-model="directivevalue[field]" />

演示: http://plnkr.co/edit/jWKwDJvYOutcLihi7UyC?p=preview

这是一个演示链接，可以查看相关IT技术的内容。请点击链接进行查看。

- dfsq

---

我认为你没有理解重点，或者是我自己没有理解。一旦你开始编辑循环外的输入，绑定就会断开。尝试在循环中点击一个输入，然后编辑“testdir”中的输入，最后再点击循环中的另一个输入。 - micah

@dfsq 不起作用...假设您从列表中单击了第二个输入，则它将显示具有第二个输入值的指令...现在更改指令输入的值，您会发现网格列表中的第二个输入值不会更改。 - Tech Solvr

@TechSolvr，你是对的，我误解了。请查看带有适当演示的正确版本。 - dfsq

Answer 2

检查这个工作的Plnkr -

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

指令代码 -

myApp.directive('testdir', function(){
  return {
    restrict: 'EA',
    scope: {
      directivevalue: "=",
      index: "="
    },
    templateUrl: 'dirtemplate.html',
    link: function(scope, elem, attrs) {

      scope.setParentValue = function(directivevalue){
        scope.$parent.vm.list[scope.index].age = directivevalue;
      };
    }
  };
})

在网格列表输入中，添加ng-change以跟踪指令的值变化 - <input ng-model="item.age" ng-click="vm.fordirective = item.age; vm.index = $index" ng-change="vm.fordirective = item.age; vm.index = $index" />

- swapnesh

---

通过在指令链接函数中硬编码 age，使其变得非常突兀且不灵活。例如，您无法在不编辑指令的情况下使用不同的属性名称。 - dfsq

@dfsq 是的，我同意这可能不是最好的代码...但在这种情况下，更改起来并不太痛苦，因为即使我将年龄作为指令属性传递，那么在更改的后期，我也需要更改 thr 本身。 - swapnesh

Answer 3

不要使用$parent（因为这不是一个好的实践），因为Angular本身可以很顺畅地处理双向数据绑定。

为了做到这一点，您可以将完整的项目与指令作用域绑定。

请检查工作中的plunkr：

https://embed.plnkr.co/LyE0G0APhwC4nco1KvOw/

指令代码：

scope.setParentValue = function(directivevalue){ scope.directivevalue = directivevalue; };

- Naman Bakliwal