Доброго времени суток!
Не могу победить проблему... Помогите пожалуйста
Есть одностраничное веб-приложение. Вся дополнительная инфа подгружается в виде модальных окон jqxwindow.
Я к этой системе пытаюсь приладить AngularJS. Изначально подружил jqxwindow с Angular, просто прописав весь код jqxwindow прямо в index.php и создав контроллер создания окна, так как написано в доке jqwidgets.
Затем создал контроллер getInfo, который получает данные с сервера, и директиву greet, которая подставляет в div внутри модального окна таблицу с данными.
После того, как все заработало, попытался вынести код модального окна в отдельный файл, создал директиву, на этом все поломалось.
При клике, который вызывает событие создания окна, в консоли появляется ошибка: 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>
И наконец, файл с Ангуляром:
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) {
}
}
});
Средний
Средний