所以我有这个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，而我想要的就是返回上面在treeGrid变量中提到的“ grids”元素
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="[email protected]" 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);
}
}
});
最佳答案
我不确定我是否真的可以使您的代码正常工作，因为这种方法非常“特殊”。
因此，我从头开始或多或少地创建了一个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指令将一个项目添加到包装容器，并在销毁该容器时将其删除：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>