我通过我的 HTML 应用程序中的 Controller 动态生成列表菜单，我在控制台中没有看到任何错误，但是没有生成元素。
HTML
<div id="toolbaropener">
</div>
<div id="accordion">
<ul>
<li>
<a href="#controlflow">Add new chart</a>
<div id="controlflow" class="accordion">
<div id="menu-container">
</div>
<div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
<img class="toolheader" src="{{x.icon}}">
<div class="toolcontent">{{x.title}}</div>
</div>
</div>
</li>
</ul>
</div>
我已经在它获取路由器时定义了 Controller ，即 View.Html
controller: 'mainController'
app.js
var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'view.html',
controller: 'mainController'
})
});
routerApp.controller('mainController',['$scope','$http',function(scope,http){
function module(library_id, schema_id, title, description, x, y, icon,variables) {
this.library_id = library_id;
this.schema_id = schema_id;
this.title = title;
this.description = description;
this.x = x;
this.y = y;
this.icon = icon;
}
scope.library = [];
scope.library_uuid = 0;
scope.schema = [];
scope.schema_uuid = 0;
scope.library_topleft = {
x: 15,
y: 145,
item_height: 50,
margin: 5
};
scope.module_css = {
width: 150,
height: 100 // actually variable
};
scope.redraw = function() {
console.log("-- Redraw function executed");
scope.schema_uuid = 0;
jsPlumb.detachEveryConnection();
scope.schema = [];
scope.library = [];
scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
{
"Control": {
"Name": "DoWhile",
"Icon": "Blah",
"Variables": [
{
"Key": "GUUserID",
"Value": 4544314512
},
{
"Key": "Username",
"Value": "test"
}
]
}
});
scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
{
"Control": {
"Name": "ForEach",
"Icon": "Blah",
"Variables": [
{
"Key": "Password",
"Value": "fdfgdfgdfg"
},
{
"Key": "Surname",
"Value": "blah blah"
}
]
}
});
};
// add a module to the library
scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
var library_id = scope.library_uuid++;
var schema_id = -1;
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.library.push(m);
};
// add a module to the schema
scope.addModuleToSchema = function(library_id, posX, posY) {
console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
var schema_id = scope.schema_uuid++;
var title = "";
var description = "Likewise unknown";
var icon = "";
var variables = "";
for (var i = 0; i < scope.library.length; i++) {
if (scope.library[i].library_id == library_id) {
title = scope.library[i].title;
description = scope.library[i].description;
icon = scope.library[i].icon;
variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
}
}
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.schema.push(m);
};
scope.removeState = function(schema_id) {
console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
for (var i = 0; i < scope.schema.length; i++) {
// compare in non-strict manner
if (scope.schema[i].schema_id == schema_id) {
console.log("Remove state at position " + i);
scope.schema.splice(i, 1);
}
}
};
}]);
最佳答案
看起来您从未在 Controller 内部调用 scope.redraw() 来启动数据。
这是我使用您的代码使其正常工作的示例。我不熟悉 AngularUI 路由器，而是使用 ngRoute
index.html
<!doctype html>
<html ng-app="DiginRt">
<head>
<title>Test Angular</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
</html>
view.html
<div id="toolbaropener">
</div>
<div id="accordion">
<ul>
<li>
<a href="#controlflow">Add new chart</a>
<div id="controlflow" class="accordion">
<div id="menu-container">
</div>
<div plumb-menu-item ng-repeat="x in library | filter : searchCommonValue" class="menu-item" data-identifier="{{x.library_id}}" data-title="{{x.title}}" draggable>
<img class="toolheader" src="{{x.icon}}">
<div class="toolcontent">{{x.title}}</div>
</div>
</div>
</li>
</ul>
</div>
app.js
var routerApp = angular.module('DiginRt', ['ui.bootstrap', 'ngRoute']);
routerApp.config(function($routeProvider) {
$routeProvider
.when('/dashboard', {
//url: '/dashboard',
templateUrl: 'view.html',
controller: 'mainController'
})
.otherwise('/dashboard');
});
routerApp.controller('mainController',['$scope','$http',function(scope,http){
function module(library_id, schema_id, title, description, x, y, icon,variables) {
this.library_id = library_id;
this.schema_id = schema_id;
this.title = title;
this.description = description;
this.x = x;
this.y = y;
this.icon = icon;
}
scope.library = [];
scope.library_uuid = 0;
scope.schema = [];
scope.schema_uuid = 0;
scope.library_topleft = {
x: 15,
y: 145,
item_height: 50,
margin: 5
};
scope.module_css = {
width: 150,
height: 100 // actually variable
};
scope.redraw = function() {
console.log("-- Redraw function executed");
scope.schema_uuid = 0;
//jsPlumb.detachEveryConnection();
scope.schema = [];
scope.library = [];
scope.addModuleToLibrary("DoWhile", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Add-fav-icon.png",
{
"Control": {
"Name": "DoWhile",
"Icon": "Blah",
"Variables": [
{
"Key": "GUUserID",
"Value": 4544314512
},
{
"Key": "Username",
"Value": "test"
}
]
}
});
scope.addModuleToLibrary("ForEach<T>", "description",0,0,"http://icons.iconarchive.com/icons/custom-icon-design/mini/48/Chat-icon.png",
{
"Control": {
"Name": "ForEach",
"Icon": "Blah",
"Variables": [
{
"Key": "Password",
"Value": "fdfgdfgdfg"
},
{
"Key": "Surname",
"Value": "blah blah"
}
]
}
});
};
// add a module to the library
scope.addModuleToLibrary = function(title, description, posX, posY,icon,variables) {
console.log("Add module " + title + " to library, at position " + posX + "," + posY+", variables: "+variables);
var library_id = scope.library_uuid++;
var schema_id = -1;
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.library.push(m);
};
// add a module to the schema
scope.addModuleToSchema = function(library_id, posX, posY) {
console.log("Add module " + title + " to schema, at position " + posX + "," + posY);
var schema_id = scope.schema_uuid++;
var title = "";
var description = "Likewise unknown";
var icon = "";
var variables = "";
for (var i = 0; i < scope.library.length; i++) {
if (scope.library[i].library_id == library_id) {
title = scope.library[i].title;
description = scope.library[i].description;
icon = scope.library[i].icon;
variables = scope.library[i].variables; console.log("Selected control variables : " + variables);
}
}
var m = new module(library_id, schema_id, title, description, posX, posY,icon,variables);
scope.schema.push(m);
};
scope.removeState = function(schema_id) {
console.log("Remove state " + schema_id + " in array of length " + scope.schema.length);
for (var i = 0; i < scope.schema.length; i++) {
// compare in non-strict manner
if (scope.schema[i].schema_id == schema_id) {
console.log("Remove state at position " + i);
scope.schema.splice(i, 1);
}
}
};
scope.redraw();
}]);
关于javascript - 为什么我没有得到列表angularJS中的任何元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27498011/