如何在Angularjs自定义指令中设置ng模型内部重复

Question

我正在尝试创建一个指令，我试图基于模型动态生成表单。在这种情况下，似乎某种方式data-ng-model未正确设置。

我得到了以下输出。

    <input type="{{ item.type }}" class="form-control" id="{{ item.id }}" data-ng-model="{{ item.model }}" placeholder="{{ item.label }}">

而我期待跟随。

    <input type="text" class="form-control" id="role" data-ng-model="role.name" placeholder="Role Name">

这里要注意的一件事是，如果我拼错或省略ng-model值，它会正确输出。

我已经关注了代码。

模板（cb-form-elements.html）

    <form class="form-horizontal" role="form" data-ng-submit="save()">
      <div class="form-group" data-ng-repeat="item in ngModel">
        <label for="{{ item.id }}" class="col-sm-2 control-label">{{ item.label }}</label>
        <div class="col-sm-6">
          <input type="{{ item.type }}" class="form-control" id="{{ item.id }}" placeholder="{{ item.label }}" data-ng-model="{{ item.model }}">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Create Role</button>
        </div>
      </div>
    </form>

指令

    angular.module('secondarySalesApp')
      .directive('cbFormElements', function () {
        return {
          templateUrl: '/views/partials/cb-form-elements.html',
          restrict: 'EA',
            require: '^ngModel',
            scope: {
              ngModel: '='
            }
        };
      });

控制器

    angular.module('secondarySalesApp')
      .controller('RoleCtrl', function ($scope, Restangular) {
        $scope.roles = Restangular.all('roles').getList().$object;

        $scope.cbFormConfig = [{
            "label": "Role Name",
            'id': "role",
            'type': 'text',
            'model': 'role.name'
        }];

        $scope.save = function(){
            $scope.roles.post($scope.role);
        }
      });

声明

    <data-cb-form-elements data-ng-model="cbFormConfig"></data-cb-form-elements>

如果我将它从指令移到页面，同样的事情也有效。 在这方面的任何帮助表示赞赏。

Answer 1

ng-model指令不是插值指令;它需要一个范围表达式而不是字符串值。

也许这会对您有所帮助：dynamic angular forms with febworms