Apr 8, 2016
4 mins read
<span class="hljs-comment">bower</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span>
<span class="hljs-comment">npm</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span>`</pre>
# CDN
<pre class="prettyprint">`<span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.js</span>
<span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.css</span>`</pre>
# 用法
app.js
<pre class="prettyprint">`(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-comment">// 載入模組</span>
angular
.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ngNotify'</span>])
.run(ngNotifyConfig);
<span class="hljs-comment">// 全域設定</span>
ngNotifyConfig.$inject = [<span class="hljs-string">"ngNotify"</span>];
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ngNotifyConfig</span><span class="hljs-params">(ngNotify)</span> {</span>
ngNotify.config({
theme: <span class="hljs-string">'pure'</span>,
position: <span class="hljs-string">'bottom'</span>,
duration: <span class="hljs-number">3000</span>,
type: <span class="hljs-string">'info'</span>,
sticky: <span class="hljs-literal">false</span>,
button: <span class="hljs-literal">true</span>,
html: <span class="hljs-literal">false</span>
});
}
})();`</pre>IndexController.js
<pre class="prettyprint">`(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
angular
.module(<span class="hljs-string">"myApp"</span>)
.controller(<span class="hljs-string">"IndexController"</span>, IndexController);
IndexController.$inject = [<span class="hljs-string">"ngNotify"</span>];
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">IndexController</span><span class="hljs-params">(ngNotify)</span> {</span>
<span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">this</span>;
<span class="hljs-comment">// 通知1</span>
vm.Notify1 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-comment">// 呼叫set函式來Notify, 預設為info type</span>
ngNotify.set(<span class="hljs-string">'Your notification message goes here!'</span>);
}
<span class="hljs-comment">// 通知2</span>
vm.Notify2 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-comment">// 可用第二個參數來指定Notify Type</span>
ngNotify.set(<span class="hljs-string">'Your error message goes here!'</span>, <span class="hljs-string">'error'</span>);
}
<span class="hljs-comment">// 呼叫時使用額外的設定值</span>
vm.Notify3 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-comment">// 獨立設定值</span>
ngNotify.set(<span class="hljs-string">"Your individual message."</span>, {
theme: <span class="hljs-string">'pure'</span>,
position: <span class="hljs-string">'bottom'</span>,
duration: <span class="hljs-number">3000</span>,
type: <span class="hljs-string">'info'</span>,
sticky: <span class="hljs-literal">false</span>,
button: <span class="hljs-literal">false</span>,
html: <span class="hljs-literal">true</span>
});
}
<span class="hljs-comment">// 關閉通知時呼叫call back函式 </span>
vm.NotifyCallBack = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
<span class="hljs-keyword">var</span> callback = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> };
<span class="hljs-comment">// 第三個參數為call back函式</span>
ngNotify.set(<span class="hljs-string">'This message has a callback.'</span>, {}, callback);
}
<span class="hljs-comment">// 自訂顯示通知的容器</span>
vm.NotifyTarget = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
ngNotify.set(<span class="hljs-string">'This message has a specific container!'</span>, {
target: <span class="hljs-string">'#new-container'</span>
});
}
<span class="hljs-comment">// 關閉通知</span>
vm.CloseNotify = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
ngNotify.dismiss();
}
}
})();
Sharing is caring!