0
AngularJSの新機能で、以前のアプリケーションでフレームワークを使っていくつかの作業をやり直そうとしました。私のアプリケーション（AngularJS v1.6.6）でモジュールがUIでポップアップを表示するために呼び出すメッセージボックスサービスを作成しようとしています。AngularJSコンポーネントのリファレンスサービス変数
サービスの変数をUI自体にバインドする方法がわかりません。私は、ローカルの 'MessageBox'変数をコントローラに作成し、その内容を参照するだけでなく、単に注入された変数を運がないものとして呼び出すことを試みました。私がサービスを通じてこれを達成できる方法はありますか？私はグローバル変数を考えていましたが、これに対してアドバイスを見ました。
サービスは最適なルートのように思えましたが、私はここでもっと理にかなった提案をしています。他のモジュールは自分自身のエラーメッセージや成功メッセージを表示する必要があるので、それを扱う標準的な方法を作る方が簡単だと思いました。
私のコードは、以下である：
メッセージbox.template.html
<div id="message" ng-show="$ctrl.MessageBox.display" style="background-color: white; border: 1px solid black; margin: 5px; float: right; top: 60px; right: 2%; padding: 5px; position: fixed; z-index: 100;">
<img id="message-image" height="30" width="30" alt="{{ $ctrl.MessageBox.Image.alt }}" ng-src="{{ $ctrl.MessageBox.Image.source }}" /> <span id="message-text">{{ $ctrl.MessageBox.text }}</span>
</div>メッセージbox.module.js
angular.module("components.message-box", ["components"])
.controller("MessageBoxController", ["$scope", "MessageBox", function MessageBoxController($scope, MessageBox) {
}]);メッセージbox.component.js
/**
* message-box.component.js
* Contains the 'message-box' component
*/
angular.module("components.message-box")
.component("messageBox", {
templateUrl: "/Scripts/cop/components/message-box/message-box.template.html",
controller: "MessageBoxController"
});メッセージbox.service.js
/**
* message-box.service.js
* Defines the 'message-box' service
*/
angular.module("components.message-box")
.service("MessageBox", function() {
var self = this;
self.display = false;
self.Image = {
alt: null,
source: null
};
self.text = null;
self.timeout = null;
/**
* Hides the displayed message
* @public
*/
self.hideMessage = function() {
self.display = false;
self.timeout = null;
self.Image.alt = null;
self.Image.source = null;
self.text = null;
};
/**
* Displays the provided message to the user
* @public
* @param {string} text Message text
* @param {Object} Image Image display data
* @param {number} [hideTimeoutMs=null] Number of miliseconds to wait before hiding the message
*/
self.showMessage = function (text, Image, hideTimeoutMs) {
self.text = text;
self.Image.alt = Image.alt;
self.Image.source = Image.src;
self.display = true;
// Cancel timer for current timeout if it exists
if (self.timeout !== null) {
self.timeout = null;
}
// Set a new timeout if specified
if (hideTimeoutMs !== undefined) {
self.timeout = setTimeout(self.hideMessage, hideTimeoutMs);
}
};
});ここでサービスを呼び出そうとする例を示します
visual.module.js
angular.module("core.visual", [
"ngRoute",
"core.visual.settings"
])
.controller("VisualController", ["$routeParams", "$scope", "MessageBox",
function VisualController($routeParams, $scope, MessageBox) {
var self = this;
self.MessageBox = MessageBox;
self.MessageBox.showMessage("This is a message", "/Content/Images/loading.png", "Loading", 10000);
}
]);私としてもメッセージボックスを使用していない試しました成功していないローカルコントローラ変数 - これは私の最新の試みです。
私は適切なトラックにいますか？これも可能ですか？