Question

我正在尝试使用指令中的模板以更简单的方式制作ng-repeat安全向下翻页编辑器。

这是演示。

从下面的代码中可以看出，我绑定了两个变量

uniqNum
和，modelName

这是代码。

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
  $scope.arr = ["1234567"];
});

app.directive('pagedownEditor', function($compile, $timeout) {
  var num=0;
  return {
    template:     
      '<div class="wmd-panel">'+
        '<div id="wmd-button-bar-{{uniqNum}}"></div>'+
        '<textarea ng-model="modelName" class="wmd-input" id="wmd-input-{{uniqNum}}">'+
        '</textarea>'+
      '</div>'+
      '<div id="wmd-preview-{{uniqNum}}" class="pagedown-preview wmd-panel wmd-preview">'+
      '</div>',
    link: function(scope, iElement, attrs) {
      if (scope.$index !== undefined) {
        //the following returns 'arr[0]'
        scope.modelName = Object.keys(scope.$parent).filter(function(el) {
          return (el[0]!=='$' && el !== "this")
        })[0] + '[' + scope.$index + ']';
        scope.uniqNum = scope.$index;
      } else if (attrs.ngModel) {
        scope.modelName = attrs.ngModel;
        scope.uniqNum = num++;
      }

      var converter = Markdown.getSanitizingConverter();
      var editor = new Markdown.Editor(converter, "-" + scope.$index);
      $timeout(function() {editor.run();});
    }
  };
});

使用{{uniqNum}}设置uniqNum没问题但是，如果我设置了ng-model="{{modelName}}"，则会出现错误Error: [$parse:syntax] 如果我设置ng-model="modelName"，则没有错误，但ng-model值是modelName本身。

它应该在textarea中显示1234567而不是变量名arr[0]。

从上面的代码中，如何使用模板设置ng-model="arr[0]"？

Answer 1

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

基本上，您可以根据范围内$compile属性的存在使用$index生成动态模板。如果定义了$index，则该指令位于ng-repeat。

内

此外，您必须在track by中使用ng-repeat="str in arr track by $index"表达式。如果没有，每次arr [0]值的变化都会导致ng-repeat重新渲染DOM。

如何在模板中分配ng-model值

1 个答案:

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