Question

我遇到了AngularJS关于指令和ng-model的问题。

假设以下示例：

在我的HTML文件中：

<div ng-controller="MyCtrl">
  <div ng-repeat="item in data">
    <directive-item data="item"/>
  </div>
  <div>
    <span>This is some input: {{ myinput }} </span>
  </div>
</div>
...

我的app.js看起来像这样（为了便于阅读而被删除）：

app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = [
      { value: 'something' }
    ];
}]);

app.directive('directiveItem', function($compile) {
  var template = '<div>'
                + '<label for="myinput">{{ data.value }}</label>'
                + '<input type="text" ng-model="myinput" />'
               + '</div>';

  var linker = function(scope, element, attrs) {
    element.html(template).show();
    $compile(element.contents())(scope);
  };

  return {
    restrict: 'E',
    link: linker,
    scope: {
      data: '='
    }
  };
});

也许你可以看到我的问题。除了在我的指令之外显示{{myinput}}之外，一切正常。如果我在注入的模板中显示它，但不在它之外，它工作得很完美。我做了很多谷歌研究，但没有找到任何帮助我的东西。

要清除前面的一些内容：$ scope.data包含在我的实际应用程序中具有不同数据集的多个对象。所以请将此作为一个简单的例子来看待。我也会根据给定的$ scope.data.object.type从我的指令中注入更多模板。给定的代码只是我所拥有的一个粗略的例子。如上所述，其他一切都没有缺陷。

这里有人有想法吗？

问候！

€二叔： @Zeeshan确实提出了一个好方法。还不是我正在寻找的100％，但它将我的想法推向另一个方向。如果有人有完美的解决方案，我可以自由发表想法！谢谢！

Answer 1

Angular Best Practice：在制作要在整个应用中重复使用的组件时，使用scope选项创建隔离范围。我尝试了几个案例来构建理解，使用对象（引用|别名行为），使用普通字符串。以下代码片段模拟：

(function(angular) {
  'use strict';
angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.data = [{ value: 'something' }];
    $scope.bar = {value:'barInitValueAsObject'};
    $scope.tar = 'tarInitValueAsNonObject';
}])
.directive('oneItem', function($compile) {
  return {
        restrict: 'E',
        scope: {
          foo: '=',
          bar:'=',
          tar:'=',
          },
        template: '<div><label for="bar">{{ foo }} : </label> <input type="text" ng-model="bar.value" /></div>'  
        + '<div><label for="bar">{{ foo }}</label> : <input type="text" ng-model="tar" /></div>'
  }
})
  
})(window.angular);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example15-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApp">      
  <div ng-controller="MyCtrl">        
    <div ng-repeat="item in data">          
      <one-item foo="item.value" bar="bar" tar="tar"></one-item>
    </div>
    <div>
      <br><br>
      <span>This is bar @ Parent : {{ bar.value }} </span>
      <br><br>
      <span>This is tar @ Parent : {{ tar }} </span>
    </div>
  </div>
</body>

</html>

Plnkr here

快乐帮助！

Answer 2

您可以在指令的隔离范围中使用另一个双向绑定。您已经传入data变量，因此只需将另一个变量添加到将与myInput绑定的范围。由于这是双向绑定，因此以一种方式更新值也会在其他位置更新值。您可能只想让指令（及其HTML输入）处理输入。

...  
return {
    restrict: 'E',
    link: linker,
    scope: {
      data: '=',
      myInput: '='
}

最后，由于你的ng-repeat，你的范围没有正确排列。目前尚不清楚您是否希望您的显示器在ng-repeat内，所以我只是将显示器放在ng-repeat中。在控制器的HTML中：

  <div ng-repeat="item in data">
    <directive-item data="item" my-input="myInput"></directive-item>
    <span>This is some input: {{ myinput }} </span>
  </div>
  <div>

  </div>

查看此plunker。

AngularJS：如何访问从自定义指令模板注入的ng-model值？

2 个答案: