这是项目中需要重复用到的一个开关组件
因为对不同的业务有不同的处理,所以需要复用组件,必须零耦合;
定义组件:
tempModule.directive("toggle",function () {
return {
restrict : "EA",
template : '<div ng-click="method()" class="toggle-btn" ng-class="{toggleBtnOpen: state}"><div class="toggle-pointer"></div></div>',
replace: true,
scope: {
method: '&',
state: '='
}
};
});
使用组件:
//html
<toggle method="monitorToggle()" state="monitor"></toggle>
//js
tempModule.controller("settingCtrl", ["$scope",'$http','httpService', function ($scope,$http,httpService) {
$scope.monitor = mapInfo.monitor_status || 0;
$scope.monitorToggle = function () {
};
}]);
上述使用中,自定义组件使用props传值,将组件独立作用域中的method、state与controller中的monitorToggle 、monitor对应起来;
组件作为一个封闭环境,只受到参数的影响,解耦成功。