2013-10-17 69 views
1

我想使用routeProvider ng-view和3個控制器製作三個選項卡應用程序。我製作了一個主要的HTML頁面和3個選項卡HTML頁面。切換選項卡工作正常,我可以訪問選項卡內的變量;但是,我不能訪問控制器內聲明的函數。哪裏有問題?在控制器內的ng-click功能不起作用

<!doctype html> 
<html ng-app="project"> 
<head> 
    <meta charset="utf-8"> 
    <title>Tabs</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="css/app.css" rel="stylesheet"> 
    <script src="js/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="lib/angular/angular.js"></script> 
    <script src="js/tbb.js"></script> 


</head><body> 


<div class="tabtable"> 
    <ul class="nav nav-tabs"> 
     <li class="active"> 
      <a href="#/tab1" data-toggle="tab">Tab1</a> 
     </li> 
     <li> 
      <a href="#/tab2" data-toggle="tab">Tab2</a> 
     </li> 
     <li> 
      <a href="#/tab3" data-toggle="tab">Tab3</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-content"> 
      <!--tabs content--> 
      <div ng-view> 

      </div> 
     </div> 
    </div> 
</div> 

這是JavaScript代碼:

angular.module('project',[]). 
    config(function($routeProvider) { 
     $routeProvider. 
      when('/', {controller:Ctrl1, templateUrl:'tbb_1.html'}). 
      when('/tab1', {controller:Ctrl1, templateUrl:'tbb_1.html'}). 
      when('/tab2', {controller:Ctrl2, templateUrl:'tbb_2.html'}). 
      when('/tab3', {controller:Ctrl3, templateUrl:'tbb_3.html'}). 
      otherwise({redirectTo:'/'}); 
    }) 
    .run(function($rootScope, $location) { 

     $rootScope.var1=1; 
     //alert($rootScope.var1); 
     // register listener to watch route changes 
     $rootScope.$on("$routeChangeStart", function(event, next, current) { 
       //alert('change'); 



     }); 
    }); 



function Ctrl1($scope,$rootScope) { 

$scope.var2=$rootScope.var1; 

function dodo1(){ 
    alert('23'); 
} 

$rootScope.$on('$routeChangeStart', function(event, next, current) { 
     //alert('change inside ctrl'); 
    //alert(form.supervisor.$dirty); 
    }); 

} 

function Ctrl2($scope,$rootScope) { 
} 

function Ctrl3($scope,$rootScope) { 
} 

tbb_1.html

<h2>tab1</h2> 
{{2+2}}<br> 
|{{var1}}|<br> 
|{{form.var1.$dirty}}| 
<a href="" ng-click="var1=8;">property</a> 
<a href="" ng-click="dodo1();">dodo</a> 
<button class="btn btn-mini" ng-click="dodo1()">buu</button> 
<form class="form-horizontal" novalidate name="form" ng-submit="submit()"> 
    <fieldset> 
    <input id="var1" name="var1" placeholder="" class="input" 
       type="text" ng-model="var1"> 
    </fieldset> 
</form> 

爲什麼點擊渡渡鳥和按鈕奈何?

回答

相關問題