angular-指令动态设置了将在控制器中访问的范围变量

Question

为了帮助您了解上下文，我想将项目名称作为用户的输入。项目的数量因人而异，因此在表单中我们有一个默认的文本框，用户可以通过单击按钮 "Add more project name"

添加新的文本框

我写了一个 angular 指令，它在表单中附加了文本框。现在在提交表单时，我们需要访问控制器中文本框的数据。我们能够动态分配一个 ng-model 变量。

但是我们无法获取控制器中动态设置的作用域变量。我知道如何将预定义的范围变量设置为在控制器中访问，但这里的范围变量是动态的，我们不能预先定义它。在下面找到我的指令代码：

b2rApp.directive('addTextField', function($compile) {
return {
    restrict: 'AECM',
    replace: true,
    scope: {
        subCatArray: "="

    },
    link: function(scope, elem, attrs, ngModelCtrl) {
        elem.bind('click', function() {

            scope.getModel = function(model_prefix) {
                return model_prefix + parseInt(scope.subCatArray.length-1);
            }
            var fragment = $compile('<label><input type="text" name="input" ng-change="testVal()" ng-model=' + scope.getModel("sub_project_name_") + '></label>')(scope);
            var sibling = elem.parent().find('div');
            //console.log(fragment, sibling[1]);
            sibling[1].insertBefore(fragment[0],sibling[1].querySelector('button'));
            //angular.element(sibling).find('div').find('button').insertBefore(fragment);

        })
    }
}

});

<label>Project name:
                <input type="text" name="input" ng-model="project_name">
            </label>
            </br>
            <div class='subproject'>
            <div>
                <label>Sub- project name: </br>
                    <input type="text" name="input" ng-model="sub_project_name_0">
                </label>
                </div>
                <button class="remove-text-field" removeSubCategory> - Remove </button>
            </div>

            </br>
        </div>
        <button class="add-text-field" sub-cat-array="scarray" ng-click="addNewSubCategory()">+ Add more subproject</button>
        </br>
        <p>Queue:{{queue}}</p>
        <input type="submit" id="submit" value="Submit" />

这是我的控制器代码：

//Initialize the array for storing sub-project names by adding text boxes dynamically
$rootScope.scarray = [{
    'index': 0
}];

//To create a new project to the existing process
$scope.submitProject = function() {
    console.log($rootScope.scarray);
    angular.forEach($rootScope.scarray, function(value, abc) {
    var sub_project_name = value.index ; 
    }, 
};

我希望我已经能够清楚地定义我的问题。任何指导将不胜感激。

Answer 1

你需要以angular的方式思考。

jsfiddle.

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    this.projects = [{
      name: "Stuart",
      text: "Hello <b>Bob</b>"
    }, {
      name: "Bob",
      text: "Hello <strong>Stuart</strong>"
    }, {
      name: "Kevin",
      text: "Hello <i>Kevin</i>"
    }];
    this.addNewSubCategory = function() {
      this.projects.push({
        name: "",
        text: ""
      });
    };
    this.removeSubCategory = function(index) {
      this.projects.splice(index, 1);
    };
    //To create a new project to the existing process
    this.submitProject = function() {
      console.log(this.projects, this.project_name);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as ex">
    <form ng-submit="ex.submitProject()">
      <label>Project name:
        <input type="text" name="input" ng-model="ex.project_name">
      </label>
      <br>
      <div class='subproject' ng-repeat="project in ex.projects">
        <div>
          <label>Sub- project name:
            <br>
            <input type="text" name="input" ng-model="project.name">
          </label>
        </div>
        <button class="remove-text-field" ng-click="ex.removeSubCategory($index)"> - Remove </button>
      </div>

      <br>
      <button ng-click="ex.addNewSubCategory()">+ Add more subproject</button>
      <br>
      <p>Queue:{{queue}}</p>
      <input type="submit" id="submit" value="Submit" />
    </form>
  </div>
</div>

angular-指令动态设置了将在控制器中访问的范围变量

angular-directive has dynamically set scope variables which is to be accessed in controller

variables

scope

directive

angularjs

angularjs-directive