Контроллер AngularJS1 не попал - PullRequest
Новая
       1

Контроллер AngularJS1 не попал

0 голосов
/ 31 мая 2018

Мне нужно создать новую страницу в одном из наших устаревших приложений, использующих 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 с кодом.Да, этот файл имеет полный код контроллера, и есть отдельные контроллеры с тем же кодом.Например, если есть контроллер «MyController.js», он имеет свой собственный код и тот же код записан также в 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

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Чтобы «ударить контроллер», необходимо включить директиву в HTML: 

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

DEMO 

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; 
       };
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <h1>Testing App</h1>
    <testing-app info="'world'">
    </testing-app>
</body>
0 голосов
/ 31 мая 2018

Прежде всего, пожалуйста, не называйте AngularJS legacy.AngularJS по-прежнему широко используется и поддерживается, и большинство в так называемом угловом мире.Взгляните на это Сравнение трендов Google .

Во-вторых, чтобы теперь на самом деле ответить на ваш вопрос, хе-хе.

Я предполагаю, что первый 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 -->

PS Ваш 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";
        console.log("Hello", myCtrl.title);
        debugger;        
}]);

Надеюсь, это поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...