angularJs - 在(链接)指令html中工作在a-href链接而不在按钮中工作

时间:2015-12-10 11:58:32

标签: javascript angularjs

在(链接)指令html中工作在a-href链接中而不在按钮

中工作

您好, 我是为常见指令创建的,这里我需要3种类型(链接,按钮,图标)命令,链接指令它工作正常但按钮不起作用



 var app = angular.module('testApp', ['ngSanitize']);
  app.directive('comonLink', ['$http', function($http) {
 
       return {
         restrict: 'AEC',
        require: '',
        scope: {
				  setValues:'@',		  
        },
        template:'<div  ng-bind-html="setValues" compile-template>   </div>',
		 
		link: function(scope, iElement, iAttrs, ngModelController) {
			var comonLink=iAttrs.comonLink;
 			var splitValues=comonLink.split(",");
			
			if(splitValues[0]=='link'){
					 scope.setValues='<a href="#/'+splitValues[1]+'">'+splitValues[2]+'</a>';
				}
			else if(splitValues[0]=='button'){		
				 scope.setValues='<button type="button" class="btn btn-default btn-block">'+splitValues[2]+'</button> ';
					}
			else if(splitValues[0]=='icon'){
				
				
				} }
      };
  }]);  
&#13;
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>testApp</title>
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 		  <script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
          <script data-require="angular-ui-select@*" data-semver="0.13.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>
          <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
   </head>
          <body class="hold-transition skin-blue sidebar-mini" data-ng-app="testApp"  > 
          <div class="wrapper"> 
             <span comon-Link="link,opRegistration,LinkName,isNew">  </span>  
 <span comon-Link="button,opRegistration,ButtonName,isNew">  </span>
             
            </div> 
          </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

将此过滤器添加到您的应用

 app.filter('unsafe', function ($sce) {
    return function (val) {
       return $sce.trustAsHtml(val);
    };
 });

并像这样使用

var app = angular.module('testApp', ['ngSanitize']);
 app.directive('comonLink', ['$http', function($http) {
     ...
    template:'<div  ng-bind-html="setValues| unsafe" compile-template>   </div> <span> {{ setValues1 }}</span>',
    ...
   };
 }]);