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

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