angular怎样写一个无耦合的组件

这是项目中需要重复用到的一个开关组件

因为对不同的业务有不同的处理，所以需要复用组件，必须零耦合；

定义组件：

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对应起来；

组件作为一个封闭环境，只受到参数的影响，解耦成功。