js
'use strict';
/* Directives */
angular.module('myApp.directives', []).
.directive("navButton", function() {
var link_func = function(scope, element, attr) {
$(element).click(function() {
if (scope.ClickedButton) {
//这里是点击后的操作,就是访问过后
}
scope.ClickedButton = element
$(element).find("a").addClass("active");
$(element).parent("li").siblings("li").find("a").removeClass("active")
})
}
return {
restrict: 'E',
link: link_func,
}
})
html
<ul class="nav navbar-nav ">
<li><nav-button><a ng-click="tabs[0].template = 'home/projects.html'">Projects </a></nav-button></li>
<li> <nav-button> <a ng-click="tabs[0].template = 'home/assets.html'">Assets</a></nav-button></li>
<li> <nav-button ><a ng-click="tabs[0].template = 'home/reports.html'">Reports </a></nav-button></li>
</ul>
基础文件
<script src="lib/angular/angular-1.4.9/angular.js"></script>
<script src="lib/jquery/jquery-1.11.1.min.js"></script>
详细例子
htm
<!DOCTYPE html>
<html ng-app="Ang">
<style>
mybutton {
display: block;
width: 100px;
height: 50px;
border-radius: 20px;
border: 1px solid;
}
</style>
<div class="main">
<mybutton></mybutton>
<mybutton></mybutton>
<mybutton></mybutton>
<mybutton></mybutton>
</div>
<script src="lib/jquery.min.1.7.js"></script>
<script src="lib/angular.js"></script>
<script src="js/control.js"></script>
js
// control.js
ang = angular.module("Ang", []);
ang.directive("mybutton", function() {
var link_func = function(scope, element, attr) {
$(element).click(function() {
if (scope.ClickedButton) {
$(scope.ClickedButton).css({backgroundColor:"white"});
}
scope.ClickedButton = element
$(element).css({backgroundColor:"red"});
})
}
return {
restrict: 'E',
link: link_func,
}
})