Question

我正在尝试使用routeProvider ng-view和3个控制器创建一个三选项卡应用程序。我制作了一个主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并且按钮什么都不做？

Answer 1

只需将dodo1方法附加到$scope，就像这样：

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

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

否则它将是范围'“私人”功能。

控制器内的ng-click功能不起作用

1 个答案: