javascript - 为什么我没有得到列表angularJS中的任何元素

Question

我通过我的 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);
            }
        }
    };


}]);

Answer 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();

}]);