Question

我有以下指令：

.directive('addfields',function($compile){

  return function(scope,element){
    element.on("click",function(){
    var enviroElement = angular.element('<enviro-variables></enviro-variables>');
      var el = $compile(enviroElement)(scope);
      console.log(el);
      angular.element(document.getElementById('moreEnviromentVariables')).append($compile(el)(scope))
    })
  }
})

这在一定程度上起作用。当调用这个指令时，它会创建一个新的enviroVariables元素，这是我写的另一个指令。它看起来像这样：

<div id = "formSection">
                  <div class="row rowmargin">
                    <div class="col-sm-6">
                      <input type="text" class="form-control" placeholder="key" id="key" ng-model="key" ng-change="updateJson()" ng-model-options="{debounce: 1000}">
                    </div>
                    <div class="col-sm-6">
                      <input type="text" class="form-control"  placeholder="value" ng-model="value" ng-change="updateJson()"  ng-model-options="{debounce: 1000}" >
                    </div>
                  </div>

                </div>

问题在于因为我正在创建一个具有相同div id的元素，所以当我执行依赖注入时，它会更新所有环境变量而不是一个。

我是否可以为我创建的每个变量实例传递或生成新的div id？我猜我应该能够在范围内传递它：{}但是无法让它工作

 .directive('enviroVariables',function(){
  return{
    restrict: 'E',
scope:{},


    templateUrl:'scripts/directives/enviromentVariablesDiv.html'
  }
});

Answer 1

在addfields指令返回函数

中尝试此操作

  return function(scope,element){
    element.on("click",function(){
    var enviroElement = angular.element('<enviro-variables></enviro-variables>');
      var el = $compile(enviroElement)(enviroElement.scope());
      console.log(el);
      angular.element(document.getElementById('moreEnviromentVariables')).append(el)
    })
  }

将div id传递给angular

1 个答案: