Question

我需要在我们的一个使用AngularJS1的遗留应用中创建一个新页面。由于我不是Angular开发人员所以我对这项技术的了解几乎不存在。我实际上是想在这个应用程序中弄脏手，因为我们将来需要维护它。这是HTML：

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead class="text-left">
        <tr>
            <th>Select</th>
            <th>Client Admin</th>
            <th>Email</th>
            <th>Company</th>
            <th>Location</th>
            <th>Users</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Bob Jones</td>
            <td>BobJones@gmail.com</td>
            <td>Tractor-Tract</td>
            <td>10</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Greenview_Hc</td>
            <td>Hoffmale</td>
            <td>Status</td>
            <td>Electronic[Parts]</td>
            <td>Pap</td>
        </tr>
    </tbody>
</table>

控制器：

Console.log('Hello');
app.controller('testController', ['$http', 'APIService', '$scope', '$sessionStorage', '$rootScope', 'StatsService', '$state', '$sce', '$translate',
    function ($http, APIService, $scope, $sessionStorage, $rootScope, StatsService, $state, $sce, $translate) {
        var myCtrl = this;
        myCtrl.title = "Hello World";
        debugger;        
}]);

指令：

app.directive('testingApp', function () {
    return {
        scope: {
            initialData: '=info',
        },
        templateUrl: 'test/test.html',
        controller: 'testController',
        controllerAs: 'tc'
    };
});

问题是我无法让控制器受到攻击。即使是控制台也没有显示任何内容。这段代码有什么问题？这是我第一次尝试使用Angular，我使用现有代码创建测试页面。

<小时/>

编辑：

我浏览了应用程序并尝试了解其架构。这是我发现的：

所有控制器都在app-controller.js中使用代码定义。是的，这个文件有完整的控制器代码，并且有单独的控制器以及相同的代码。例如，如果有一个控制器＆＃34; MyController.js＆＃34;它有自己的代码，同样的代码也写在app-controller.js

中

所有指令都在app-directives.js

中定义

配置文件的代码如下：

$stateProvider.state('index.testing', {
  url: "/testing",
  templateUrl: "testing/testing.html",
  controller: "testingController",
  controllerAs: "testing",
  data: {
    requireLogin: true,
    accessPage: 'Test.aspx',
    pageTitle: "Testing View"
  }

index.html仅包含config.js

Answer 1

要使＆＃34;控制器命中＆＃34;，该指令需要包含在HTML中：

<body ng-app="app">
    <testing-app info="'world'">
    </testing-app>
</body>

DEMO

＆＃13;

app = angular.module("app",[]);
app.directive('testingApp', function () {
    return {
        scope: {
            initialData: '<info',
        },
        template: `<fieldset>
                      title={{tc.title}}
                   </fieldset>`,
        controller: 'testController',
        controllerAs: 'tc',
        bindToController: true
    };
});
app.controller('testController',
    function () {
        var myCtrl = this;
        myCtrl.$onInit = function() {
            myCtrl.title = "Hello "+myCtrl.initialData;
            console.log("Hello", myCtrl.title);
           debugger; 
       };
});

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <h1>Testing App</h1>
    <testing-app info="'world'">
    </testing-app>
</body>

＆＃13;

Answer 2

首先，请不要致电AngularJS遗产。 AngularJS仍然被广泛使用和支持，并且在所谓的角度世界中占大多数。看看这个Google trends comparison。

其次，现在实际上解决了你的问题。

我假设第一个HTML代码段是test.html文件内容。我建议使用ng-repeat为<tr> s

以更有棱角的方式重写它

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead class="text-left">
        <tr>
            <th>Select</th>
            <th>Client Admin</th>
            <th>Email</th>
            <th>Company</th>
            <th>Location</th>
            <th>Users</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="dataEntry in testController.initialData">
            <td><input type="checkbox" ng-model="dataEntry.select"/></td>
            <td>{{dataEntry.clientAdmin}}</td>
            <td>{{dataEntry.email}}</td>
            <td>{{dataEntry.company}}</td>
            <td>{{dataEntry.location}}</td>
            <td>{{dataEntry.users}}</td>
        </tr>
    </tbody>
</table>

为了让您的<table> HTML代码在某处呈现，您需要在那里实例化您的指令：

<!-- Page HTML -->
<!-- someObjectWithInfo would come the controller of this page -->
<testing-app info="someObjectWithInfo"></testing-app>
<!-- Page HTML -->

P.S。你的Console.log（＆＃39;你好＆＃39;）;应该在你的控制器功能内，而不是在外面，如下：

app.controller('testController', ['$http', 'APIService', '$scope', '$sessionStorage', '$rootScope', 'StatsService', '$state', '$sce', '$translate',
    function ($http, APIService, $scope, $sessionStorage, $rootScope, StatsService, $state, $sce, $translate) {
        var myCtrl = this;
        myCtrl.title = "Hello World";
        console.log("Hello", myCtrl.title);
        debugger;        
}]);

希望这会有所帮助：）

AngularJS1控制器没有被点击

编辑：

2 个答案:

DEMO