Question

我在这里的教程中工作：https://fourtonfish.com/blog/2014-01-dynamically-add-directives-in-angularjs-no-jquery/

但是，我想创建一个指令，并在每次单击按钮时将其注入我的HTML。经过一番阅读后，我的尝试就在下面。你会在main.js中看到我有这段代码：

.directive('addfields',function($compile){
  console.log("directive called.");

  return function(scope,element){
    element.on("click",function(){
      var enviroElement = angular.element(document.createElement('enviroVariables'));
      var el = $compile(enviroElement)(scope);
      console.log(el);
      angular.element(document.getElementById('moreEnviromentVariables')).append($compile(el)(scope))
    })
  }
})

这里我试图创建一个元素，编译它，然后注入它。这不起作用，我不知道为什么。我没有收到任何错误。有什么建议吗？

完整代码：

main.html中

  <div id ="fullForm" ng-controller="MainCtrl" >                
      <enviro-variables></enviro-variables>
<div id="moreEnviromentVariables"></div>
    </div>
                    <button-add></button-add>

main.js

 'use strict';

    /**
     * @ngdoc function
     * @name jsongeneratorApp.controller:MainCtrl
     * @description
     * # MainCtrl
     * Controller of the jsongeneratorApp
     */
    angular.module('jsongeneratorApp')
      .controller('MainCtrl', function ($scope) {

      .directive('buttonAdd',function(){
        return{
        restrict:'E',
        templateUrl:'scripts/directives/addbutton.html'
      }
    })

   .directive('addfields',function($compile){
  console.log("directive called.");

  return function(scope,element){
    element.on("click",function(){
      var enviroElement = angular.element(document.createElement('enviroVariables'));
      var el = $compile(enviroElement)(scope);
      console.log(el);
      angular.element(document.getElementById('moreEnviromentVariables')).append($compile(el)(scope))
    })
  }
})

addbutton.html

<div class="row rowmargin">
  <div class="col-sm-9">
  </div>
  <div class="col-sm-3">
    <button addfields class="btn"> Add New Variable</button>

  </div>
</div>

enviromentVariablesDiv.html

<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>

Answer 1

查看此plunker http://plnkr.co/edit/eZTtRVTPb7k9kgS8woKh?p=preview和此Inserting directives into HTML in AngularJS?

将指令插入DOM，您可以使用以下

示例：

注册的功能有所不同一个名为FeatureRegistry的角度服务。从那里他们被采取并从FeatureSelectionController插入侧边栏。通过单击相应的startFeature()功能的功能应该调用功能

在html中可以这样解决：

<feature ng-repeat="f in registry.all()" model="f" state="list">
<feature ng-repeat="f in registry.maximized()" model="f" state="open">
<feature ng-repeat="f in registry.minimized()" model="f" state="minimized">

然后在你的指令模板中，你可以拥有你的共同点功能然后根据使用的状态确定要具有的功能 ng-switch或ng-show

每次单击按钮时插入指令

1 个答案: