1

我正在尝试使用 routeProvider ng-view 和 3 个控制器制作一个三选项卡应用程序。我制作了一个主要的 HTML 页面和 3 个选项卡 HTML 页面。切换选项卡工作正常，我可以访问选项卡一中的变量；但是，我无法访问控制器内部声明的函数。哪里有问题？

<!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>

为什么单击渡渡鸟和按钮什么都不做？

4

1 回答 1

3

只需将您的dodo1方法附加到$scope，如下所示：

$scope.dodo1 = function(){
    alert('23');
}

工作 plnkr：http ://plnkr.co/edit/glyGT6?p=preview

否则它将是作用域的“私有”功能。

于 2013-10-17T19:50:57.157 回答