There is a one-page web application. All additional information is loaded in the form of jqxwindow modal windows.

I am trying to fit AngularJS to this system. Initially, I made jqxwindow with Angular, simply by writing all the jqxwindow code directly into index.php and creating the window creation controller as written in the jqwidgets dock. Then I created a getInfo controller, which receives data from the server, and a greet directive, which inserts a table with data into a div inside a modal window.

After everything worked, I tried to put the code of the modal window into a separate file, created a directive, and that was all broken. When clicking, which causes a window creation event, an error appears in the console:

TypeError: $ scope.jqxWindowSettings.apply is not a function

index.php:

<html lang="en" data-ng-app="arm"> <!-- объявляю модуль в теге html, как в учебнике --> <th data-ng-controller="armController" data-ng-click="showWindow()">Всего</th> <!-- вот тут я пытаюсь вызвать создание модального окна по клику --> <div show-new-window></div> <!-- этот блок находится в самом низу index.php -->

jqx-window-template:

 <jqx-window jqx-settings="jqxWindowSettings"> <div> Modal Window </div> <div> <div data-ng-controller="getInfo"> <div greet></div> </div> <div> <div style="float: right; margin-top: 15px;"> <jqx-button data-ng-click="Ok()" style="margin-right: 10px">Ok</jqx-button> <jqx-button data-ng-click="Cancel()">Cancel</jqx-button> </div> </div> </div> </jqx-window>

info-description.html:

 <div class="form-group"> <table class="table table-striped table-bordered"> <thead> <tr> <th>ID</th> <th>IMEI</th> <th>Model</th> <th>Наш</th> <th>Телефон</th> </tr> </thead> <tbody> <tr data-ng-repeat="answer in newInfo"> <td>{{answer.id}}</td> <td>{{answer.imeiNumber}}</td> <td>{{answer.model}}</td> <td>{{answer.own ? 'Наш' : 'Не наш'}}</td> <td>{{answer.phone}}</td> </tr> </tbody> </table> </div>

And finally, the file with Angulyar:

 var arm = angular.module("arm", ["jqwidgets"]); arm.controller("armController", function ($scope) { $scope.jqxWindowSettings = { maxHeight: 1000, maxWidth: 1000, minHeight: 350, minWidth: 350, height: 200, width: 200, resizable: true, isModal: false, autoOpen: false, collapsed: true, modalOpacity: 0 }; // show button click handler. $scope.showWindow = function () { $scope.jqxWindowSettings.apply('open'); }; // Ok button click handler. $scope.Ok = function () { $scope.jqxWindowSettings.apply('close'); }; // cancel button click handler. $scope.Cancel = function () { $scope.jqxWindowSettings.apply('close'); }; }); arm.controller('getInfo', function ($scope, $http) { $http.get('tablets/new-tablets-request.php').success(function (data) { $scope.newInfo = data; console.log($scope.newInfo); }); }); arm.directive("greet", function () { return { controller: "getInfo", restrict: 'A', templateUrl: 'tablets/info-description.html', scope: { }, link: function (scope, element, attributes) { } } }); arm.directive("showNewWindow", function () { return { controller: "armController", restrict: 'A', templateUrl: 'tablets/jqx-window-template.html', scope: {}, link: function (scope, element, attributes) { } } });

    1 answer 1

    I found the solution myself.

    A piece of file with Angulyarom. It was:

     arm.controller("armController", function ($scope) { $scope.jqxWindowSettings = { maxHeight: 1000, maxWidth: 1000, minHeight: 350, minWidth: 350, height: 200, width: 200, resizable: true, isModal: false, autoOpen: false, collapsed: true, modalOpacity: 0 }; // show button click handler. $scope.showWindow = function () { $scope.jqxWindowSettings.apply('open'); }; // Ok button click handler. $scope.Ok = function () { $scope.jqxWindowSettings.apply('close'); }; // cancel button click handler. $scope.Cancel = function () { $scope.jqxWindowSettings.apply('close'); }; });

    It became:

     arm.controller("armController", function ($scope,$rootScope) { $scope.jqxWindowSettings = { maxHeight: 1000, maxWidth: 1000, minHeight: 350, minWidth: 350, height: 200, width: 200, resizable: true, isModal: false, autoOpen: false, collapsed: true, modalOpacity: 0 }; // show button click handler. $scope.showWindow = function () { $rootScope.jqxWindowSettings.apply('open'); }; // Ok button click handler. $scope.Ok = function () { $rootScope.jqxWindowSettings.apply('close'); }; // cancel button click handler. $scope.Cancel = function () { $rootScope.jqxWindowSettings.apply('close'); }; });