的document.getElementById返回空后，创建新的使用packery angularjsgetElementById、document、angularjs、packery

2023-09-13 04:18:44 作者：￡巷战★星君彡

所以我有这样的HTML标记

 ＆LT;按钮NG点击=创建（）＆GT;创建列表＆LT; /按钮＆GT;

我把它所以每当我点击它使用我创建了一个新的列表packery jQuery插件

  app.directive（'packery'，['$编译，函数（$编译）{   返回{    适用范围：假的，    限制：EA，    链接：功能（范围，榆树，ATTR）{        $ .bridget（'packery'，Packery）; // Packery对象转换为jQuery插件        变量$容器= $（榆树）.packery（）; //安装packery插件        VAR项目= {          创建：函数（）{              VAR ELEM =使用document.createElement（分区）;              VAR panelHeight = document.createAttribute（面板的高度）;              panelHeight.value =;              elem.setAttributeNode（panelHeight）;              elem.className =项;              VAR的TreeGrid =使用document.createElement（网考）;              treeGrid.id =网格;              treeGrid.className =小字体;              elem.appendChild（TreeGrid的）;              返回$编译（ELEM）（范围）;          }     scope.create =功能（）{         变量$项= $（item.create（））;         $ container.append（$项目）.packery（'附加'，$项目）;         $ container.packery（）;         $ items.each（可拖动）;         的console.log（的document.getElementById（网格））; //这里与对象返回       }     }   }  }]}）;

很明显，我创建一个自定义指令，它是并网测试是不是？但奇怪的是，当我使用的document.getElementById总是返回空，而我想要什么正如我上面提到的的TreeGrid变量

时，返回网格元素

  app.directive（'gridTest'，[功能（）{    返回{      适用范围：假的，      限制：EA，      链接：功能（范围，榆树，ATTR）{           VAR容器=的document.getElementById（网格）;           VAR的TreeGrid =新links.TreeGrid（集装箱，[]）; //我需要的容器安装这个新的对象，但它总是返回一个空:(      }    }}]）;

我很坚持，可能你们能帮我吗？

=============================================== ===================================

看来我也救不了我的plunkr所以我想我会复制粘贴codeS在这里

index.html的

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML NG-应用=对myApp＆GT;  ＆LT; HEAD＆GT;    ＆LT;间的charset =UTF-8/＆GT;    ＆LT;标题＆GT;＆LT; /标题＆GT;    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;    ＆所述;脚本数据需要=jquery的数据semver =1.9.1SRC =// cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js\">< / SCRIPT＆GT;    ＆所述;脚本数据需要=angular.js@1.0.7数据semver =1.0.7SRC =的https：//$c$c.angularjs.org/1.0.7/angular.js＆GT ;＆LT; / SCRIPT＆GT;    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;  ＆LT; /头＆GT;  ＆LT;机身NG控制器=测试＆GT;     {{标题}}     ＆LT;小时＆GT;     ＆LT;创建按钮＆GT;＆LT; /创建按钮＆GT;     ＆LT;小时＆GT;     ＆LT; DIV ID =容器＆GT;       ＆LT;新指令ID =新＆GT;＆LT; /新指令＆GT;     ＆LT; / DIV＆GT;  ＆LT; /身体GT;＆LT; / HTML＆GT;

的script.js

  VAR应用= angular.module（'对myApp'，[]）;app.controller（测试，函数（$范围）{  $ scope.title =创建自定义指令;}）;app.directive（'createButton'，函数（$编译）{  返回{    限制：EA，    适用范围：假的，    模板：＆LT;按钮和GT;创建＆LT; /按钮＆gt;中，    链接：功能（范围，榆树，ATTR）{      VAR项目= {        创建：函数（）{          VAR的TreeGrid =使用document.createElement（新指令）;          treeGrid.id =网格;          返回$编译（的TreeGrid）（范围）;        }      }      angular.element（榆树）。点击（函数（）{        变量$ =容器$（'＃集装箱'）;        变量$项= $（item.create（））;        $ container.append（$项目）;      }）;    }  }}）;app.directive（'newDirective'，函数（）{  返回{    限制：EA，    适用范围：假的，    模板：这是新的自定义指令，    链接：功能（范围，榆树，ATTR）{      VAR容器=的document.getElementById（attr.id）;      的console.log（容器）;    }  }}）;

解决方案

我不知道如果我真的能得到您的code工作，因为方法是pretty特殊。于是我开始或多或少从零开始创建一个 packery 和 packery项指令（在线演示在底部，也是一个 plunker演示）。

 ＆LT; packery＆GT;    ＆LT; DIV CLASS =packery项目NG重复=中的项项＆GT;        ＆LT; H3＆GT; {{item.title}}＆LT; / H3 GT＆;        {{item.text}}    ＆LT; / DIV＆GT;＆LT; / packery＆GT;

的 packery 指令是pretty很多只是提供了 packery项的容器元素包装指令。

  app.directive（'packery'，函数（）{    返回{        限制：'E'，        适用范围：假的，        transclude：真实，        模板：'＆LT; DIV NG-transclude类=JS-packery＆GT;＆LT; / DIV＆GT;，        控制器：函数（$范围，$元素）{            this.container = angular.element（$ element.children（）[0]）;            this.packeryConfig = {                天沟：10            };            this.container.packery（this.packeryConfig）;        }    }}）;

的 packery项指令增加了一个项目到packery容器，并删除它时，它被破坏：

  app.directive（'packeryItem'，函数（）{    返回{        限制：C，        适用范围：假的，        要求：'^ packery'，        链接：功能（范围，ELEM，ATTR，packeryCtrl）{            packeryCtrl.container.packery（'为addItems'，ELEM）;            packeryCtrl.container.packery（packeryCtrl.packeryConfig）;            （范围。在$（'$破坏'，功能）{                packeryCtrl.container.packery（packeryCtrl.packeryConfig）;            }）;        }    }}）;

我希望这是接近你的最终目标，因为它得到。看看有工作演示波纹管完整的片段。

\r\r

 VAR应用= angular.module（'对myApp'，[]）;\r\rapp.controller（测试，函数（$范围）{\r  $ scope.items = [];\r\r  $ scope.addItem =功能（）{\r    $ scope.items.push（{\r      标题：'项目'，\r      文本：Lorem存有悲坐阿梅德\r    }）;\r  }\r\r  $ scope.removeItem =功能（项目）{\r    $ scope.items.splice（$ scope.items.indexOf（项目），1）;\r  }\r}）;\r\r\rapp.directive（'packery'，函数（）{\r  返回{\r    限制：'E'，\r    适用范围：假的，\r    transclude：真实，\r    模板：'＆LT; DIV NG-transclude类=JS-packery＆GT;＆LT; / DIV＆GT;，\r    控制器：函数（$范围，$元素）{\r      this.container = angular.element（$ element.children（）[0]）;\r      this.packeryConfig = {\r        天沟：10\r      };\r\r      this.container.packery（this.packeryConfig）;\r    }\r  }\r}）;\r\r\rapp.directive（'packeryItem'，函数（）{\r  返回{\r    限制：C，\r    适用范围：假的，\r    要求：'^ packery'，\r    链接：功能（范围，ELEM，ATTR，packeryCtrl）{\r      packeryCtrl.container.packery（'为addItems'，ELEM）;\r      packeryCtrl.container.packery（packeryCtrl.packeryConfig）;\r\r      （范围。在$（'$破坏'，功能）{\r        packeryCtrl.container.packery（packeryCtrl.packeryConfig）;\r      }）;\r    }\r  }\r}）;

 .packery项{\r  宽度：25％;\r  边框：1px的固体＃000;\r  箱尺寸：边界盒;\r}\r.packery-item.w2 {\r  宽度：50％;\r}

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js\"></script>\r＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js＆GT;＆下; /脚本＆GT;\r＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js＆GT;＆下; /脚本＆GT;\r\r＆LT; DIV NG-应用=对myApp＆GT;\r  ＆LT; DIV NG控制器=测试＆GT;\r    ＆LT;按钮NG点击=的addItem（）＆gt;添加新项目＆lt; /按钮＆GT;\r    ＆LT;小时＆GT;\r\r    ＆LT; packery＆GT;\r      ＆LT; DIV CLASS =packery项目NG重复=中的项项＆GT;\r        ＆LT; H3＆GT; {{item.title}}＆LT; / H3 GT＆;\r        ＆LT;按钮NG点击=为removeItem（项目）＆GT;删除＆LT; /按钮＆GT;\r        ＆所述p为H.;\r          {{item.text}}\r        ＆所述; / P＆GT;\r      ＆LT; / DIV＆GT;\r    ＆LT; / packery＆GT;\r  ＆LT; / DIV＆GT;\r＆LT; / DIV＆GT;

\r\r\r

so I have this html markup

<button ng-click="create()">create  list</button>

I made it so whenever I click it I create a new list using packery jQuery plugin

app.directive('packery', ['$compile', function($compile) {
   return {
    scope:false,
    restrict: "EA",
    link: function(scope,elm, attr) {
        $.bridget('packery', Packery); //convert Packery object into jquery plugin

        var $container = $(elm).packery(); //install packery plugin

        var item = {
          create: function() {
              var elem = document.createElement("div");
              var panelHeight = document.createAttribute("panel-height");
              panelHeight.value = "";
              elem.setAttributeNode(panelHeight);
              elem.className = "item";

              var treeGrid = document.createElement("grid-test");
              treeGrid.id = "grids";
              treeGrid.className = "little-font";
              elem.appendChild(treeGrid);

              return $compile(elem)(scope);
          }


     scope.create = function() {
         var $items = $(item.create());

         $container.append($items).packery('appended', $items);
         $container.packery();
         $items.each(draggable);

         console.log(document.getElementById("grids")); //here it return with the object
       }
     }
   }
  }
]});

obviously I create a custom directive which is "grid-test" isn't it ? but the weird thing is when I'm using document.getElementById is always returning null whereas what I want is returning the "grids" element as I mentioned above on treeGrid variable

app.directive('gridTest', [ function() {
    return {
      scope:false,
      restrict: "EA",
      link: function(scope,elm, attr) {

           var container = document.getElementById("grids");
           var treegrid = new links.TreeGrid(container, []); //I need the container to install this new object but it always returns a null :(
      }
    } 
}]);

I really stuck, could you guys help me ?

==================================================================================

it seems that I couldn't save my plunkr so I guess I will copy paste the codes in here

index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="1.9.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://code.angularjs.org/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="test">
     {{title}}
     <hr>
     <create-button></create-button>
     <hr>
     <div id="container">
       <new-directive id="new"></new-directive>
     </div>
  </body>

</html>

script.js

var app = angular.module('myApp', []);

app.controller('test', function($scope) {
  $scope.title = "Creating custom directive";
});

app.directive('createButton', function($compile) {
  return {
    restrict: "EA",
    scope: false,
    template: "<button>Create</button>",
    link: function(scope, elm, attr) {

      var item = {
        create: function() {

          var treeGrid = document.createElement("new-directive");
          treeGrid.id = "grids";

          return $compile(treeGrid)(scope);
        }
      }

      angular.element(elm).click(function() {
        var $container = $('#container');
        var $items = $(item.create());

        $container.append($items);
      });
    }
  }
});

app.directive('newDirective', function() {
  return {
    restrict: "EA",
    scope: false,
    template: "this is new custom directive",
    link: function(scope, elm, attr) {
      var container = document.getElementById(attr.id);
      console.log(container);
    }
  }
});

解决方案

I was not sure if I really could get your code working because the approach is pretty "special". So I started more or less from scratch to create a packery and a packery-item directive (Inline demo at the bottom and also a plunker demo).

<packery>
    <div class="packery-item" ng-repeat="item in items" >
        <h3>{{item.title}}</h3>

        {{item.text}}
    </div>
</packery>

The packery directive is pretty much just a wrapper that provides the container element for the packery-item directive.

app.directive('packery', function() {
    return {
        restrict: 'E',
        scope: false,
        transclude: true,
        template: '<div ng-transclude class="js-packery"></div>',
        controller: function($scope, $element) {
            this.container = angular.element($element.children()[0]);
            this.packeryConfig = {
                gutter: 10
            };

            this.container.packery(this.packeryConfig);
        }
    }
});

The packery-item directives adds an item to the packery container and removes it when it is destroyed:

app.directive('packeryItem', function() {
    return {
        restrict: "C",
        scope: false,
        require: '^packery',
        link: function(scope, elem, attr, packeryCtrl) {
            packeryCtrl.container.packery('addItems', elem);
            packeryCtrl.container.packery(packeryCtrl.packeryConfig);

            scope.$on('$destroy', function() {
                packeryCtrl.container.packery(packeryCtrl.packeryConfig);
            });
        }
    }
});

I hope this is as close to your end goal as it gets. Have a look at the complete snippet with a working demo bellow.

var app = angular.module('myApp', []);

app.controller('test', function($scope) {
  $scope.items = [];

  $scope.addItem = function() {
    $scope.items.push({
      title: 'Item',
      text: 'Lorem Ipsum dolor sit amet'
    });
  }

  $scope.removeItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  }
});


app.directive('packery', function() {
  return {
    restrict: 'E',
    scope: false,
    transclude: true,
    template: '<div ng-transclude class="js-packery"></div>',
    controller: function($scope, $element) {
      this.container = angular.element($element.children()[0]);
      this.packeryConfig = {
        gutter: 10
      };

      this.container.packery(this.packeryConfig);
    }
  }
});


app.directive('packeryItem', function() {
  return {
    restrict: "C",
    scope: false,
    require: '^packery',
    link: function(scope, elem, attr, packeryCtrl) {
      packeryCtrl.container.packery('addItems', elem);
      packeryCtrl.container.packery(packeryCtrl.packeryConfig);

      scope.$on('$destroy', function() {
        packeryCtrl.container.packery(packeryCtrl.packeryConfig);
      });
    }
  }
});

.packery-item {
  width: 25%;
  border: solid 1px #000;
  box-sizing: border-box;
}
.packery-item.w2 {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="test">
    <button ng-click="addItem()">Add new item</button>
    <hr>

    <packery>
      <div class="packery-item" ng-repeat="item in items">
        <h3>{{item.title}}</h3>
        <button ng-click="removeItem(item)">Remove</button>
        <p>
          {{item.text}}
        </p>
      </div>
    </packery>
  </div>
</div>

上一篇：如何使从不同端口上运行的本地应用程序AngularJS请求当地的Rails应用程序？应用程序、端口、当地、不同

下一篇：显示功能，同时从数据库获取数据的进度进度、功能、数据库、数据

相关推荐

精彩图集

精彩推荐

图片推荐