Question

这是我的示例angularjs代码。目前我无法获取我点击的项目名称。我从指令模板中传递了方法内的参数名称属性。我在父控制器中使用的那种方法。

<!DOCTYPE html >
<html>
<head>
<style>
.onoffswitch {
    position: relative; width: 90px;
   -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 8px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #D1D0CE	; color: #AB9ED9;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

</style>
   <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>	
    
<script type='text/javascript'>
   var app = angular.module('mainapp', []); 

app.controller('check', function($scope) { 
     $scope.selData=[];
	 $scope.sel="tt";
     $scope.fruits = [{'name':'apple','status':false},
	                  {'name':'orange','status':false},
	                  {'name':'pear','status':false},
					  {'name': 'naartjie','status':false}];
     
	
	 $scope.check=function(val){
	 alert(val);
	 }
	 });
app.directive('slidecheckbox', function() {	
	var directive = {};
    directive.restrict		 = 'A';
    directive.template	 = '<table><tr ng-repeat="fruitName in slide"><td>{{fruitName.name}}</td><td><label><div class="onoffswitch">'+
                               '<input type="checkbox" name="{{fruitName.name}}" class="onoffswitch-checkbox"  value="{{fruitName.name}}" ng-checked="fruitName.status"'+
							   'x-ng-click="test()">'+
                               '<label class="onoffswitch-label"><span class="onoffswitch-inner"></span><span class="onoffswitch-switch"></span></label></div> '+ 
                                '</label></td></tr> </table>';   
	directive.scope 		 = {
									slide: "=obj",
									test:"&"
							   };	
	
    return directive;
});
   
</script>
</head>
<body ng-app="mainapp">
<div  ng-controller="check">
 <div style="width:175px; height:150px;overflow: auto;border-style: solid; border-width: 2px;" slidecheckbox obj="fruits" test="check()"></div>

 </div>  
</body>
</html>

请某人帮帮我..

Answer 1

您在输入上点击了ng，但输入被

隐藏了

.onoffswitch-checkbox {
    display: none;
}

如果您希望点击工作，请将其放在以下标记

上

<label class="onoffswitch-label"  ng-click="test()">

Plunker

如何使用指令调用范围调用从指令到控制器的方法和使用参数的方法

1 个答案: