gpt4 book ai didi

javascript - 使用 angularjs 创建新的 packery 后 document.getElementById 返回 null

转载 作者:行者123 更新时间:2023-12-03 11:09:29 29 4
gpt4 key购买 nike

所以我有这个 html 标记

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

我做到了,所以每当我单击它时,我都会使用 packery jQuery 插件创建一个新列表

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
}
}
}
}
]});

显然我创建了一个自定义指令“grid-test”,不是吗?但奇怪的是,当我使用 document.getElementById 时总是返回 null,而我想要的是返回“grids”元素,正如我上面在 treeGrid 变量上提到的

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 :(
}
}
}]);

我真的很困难,你们能帮我吗?

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

看来我无法保存我的 plunkr,所以我想我会将代码复制粘贴到此处

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>

脚本.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);
}
}
});

最佳答案

我不确定我是否真的能让你的代码正常工作,因为这种方法非常“特殊”。因此,我或多或少从头开始创建一个 packery 和一个 packery-item 指令(底部的内联演示以及 plunker demo ).

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

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

packery 指令几乎只是一个包装器,为 packery-item 指令提供容器元素。

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);
}
}
});

packery-item 指令将一个项目添加到 packery 容器中,并在销毁时将其删除:

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);
});
}
}
});

我希望这尽可能接近您的最终目标。查看完整的代码片段和下面的工作演示。

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>

关于javascript - 使用 angularjs 创建新的 packery 后 document.getElementById 返回 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27676288/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com