##開發系統ui
* 系統ui模板
~~~
js部分：
~~~
~~~
(function () {
'use strict';
angular.module('System').directive("sysUi指令名", [function(){
return {
replace:true,
scope:{
sync:"=",
on:"=",
trigger:"="
},
templateUrl:'SysUi/Template/sysUi指令名.html',
link : function(scope, element, attrs) {
},
controller:["$rootScope","$scope",function ($rootScope,$scope) {
//數據雙向綁定
$scope.data = $scope.sync;
$scope.click = function ( obj ) {
//調用控制器方法
$scope.trigger('myclick','ui調用控制器方法');
};
//綁定事件提供控制器調用
$scope.on('uiclick',function ( arg ) {
alert("ui綁定的事件"+arg);
});
}]
};
}]);
})();
~~~
模板視圖部分
~~~
<div style="background: #f0ad4e">
<h1>ui部分</h1>
<hr>
<p>數據雙向測試：<input ng-model="title"></p>
<button ng-click=”click()”>點擊我調用頁面控制器方法</button>
</div>
~~~
* 頁面控制器調用ui指令
~~~
js部分
~~~
~~~
//ui數據綁定
wjSystem.sysUi({
mydemo:{
sync:{
title:"標題"
},
on:{
myclick:function ( str ) {
alert("頁面控制器方法myclick:"+str);
}
}
}
});
//調用ui方法
$scope.click = function () {
//調用ui方法（下面兩種是等效的，個人習慣愛用哪種都可以）
wjSystem.sysUi('mydemo').trigger('uiclick', "控制器調用ui" ); //調用ui方法
wjSystem.sysUi("mydemo.uickick")("控制器調用ui,點調用寫法"); //點調用ui方法
};
~~~
~~~
模板視圖部分
~~~
~~~
<div style="background: #bbbbbb">
<h1>控制器部分</h1>
<hr>
<p>數據雙向測試：<input ng-model="mydemo.title"></p>
<button ng-click="click()">點擊我調用ui頁面方法</button>
</div>
<br />
<sys-ui data="mydemo" name="demo"></sys-ui>
~~~
