AngularJS: how to put modal window html into a separate file?

A

Alexander2016-01-19 07:37:20

Angular

Alexander, 2016-01-19 07:37:20

Good day!
Can't beat the problem... Help please
There is a single page web application. All additional info is loaded as jqxwindow modal windows.
I'm trying to adapt AngularJS to this system. Initially, I made jqxwindow friends with Angular by simply writing all the jqxwindow code directly into index.php and creating a window creation controller, as it is written in the jqwidgets dock.
Then I created a getInfo controller that receives data from the server, and a greet directive that substitutes a table with data in the div inside the modal window.
After everything worked, I tried to move the code of the modal window to a separate file, created a directive, but everything went wrong.
When clicking, which causes the window creation event, an error appears in the console: TypeError: $scope.jqxWindowSettings.apply is not a function
Where I messed up - I can’t find it.
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 Angular:

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) {
    }
  }
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander, 2016-01-22
@Alessanderrr

I found the solution myself.
A piece of a file with Angular
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');
    };
  });