1

routeProvider ng-view と 3 つのコントローラーを使用して、3 つのタブのアプリを作成しようとしています。1 つのメイン HTML ページと 3 つのタブ HTML ページを作成しました。タブの切り替えは正常に機能し、タブ 1 内の変数にアクセスできます。ただし、コントローラー内で宣言された関数にアクセスできません。問題はどこだ？

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

dodo とボタンをクリックしても何も起こらないのはなぜですか?

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 に答える