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
"monitorToggle()" state="monitor">//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对应起来；

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！