logo标签列表

ng-click在锚点元素上无法正常工作

javascriptangularjstwitter-bootstrap-3
4

问题1：我试图在Bootstrap中使用

2
请展示您的代码。 - hgoebl
@hgoebl 我已经附上了 jsfiddle 链接。 - Chuck
1
你的 Fiddle 里有很多错误。请纠正它们并重新发布链接。 - chandu
@chandu 我已经更新了 JSfiddle 并添加了 jQuery 库，但是 JavaScript 仍然存在一个错误。你能帮我看一下原因吗？ - Chuck
嗨@Chunk，我已经更新了代码。请查看fiddle。 - chandu
锚标签应该只用于链接，如果您仅使用此标签触发JavaScript函数，则该标签应为按钮。 - Scott Sword
3个回答
2
函数调用的括号缺失。正确写法应该是：
ng-click="handleClick()"
0

回答问题2：

也许有更聪明的解决方案，但这个也能够工作：

angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
    function ($scope, $location, $rootScope) {
        $rootScope.$on('$locationChangeSuccess', function () {
            var path = $location.path();
            // you may apply logic on the path (group together in case of dropdown-menu e.g.)
            $scope.topMenu = path;
        });
    }
]);


<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
     ng-controller="MenuCtrl">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- ... -->
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{active: topMenu == '/'}">
                    <a href="#">Home</a></li>
                <li ng-class="{active: topMenu == '/about'}">
                    <a href="#about">About</a></li>
                <!-- more... -->
            </ul>
        </div>
    </div>
</div>
这是一个好的解决方案...但我正在尝试构建一个没有URL重定向的单页应用程序。 对于Q2，我有另一种解决方案，您可以在锚点中放置data-toggle='pill'属性。 - Chuck
代码来自一个纯单页应用。没有重定向（页面重新加载），所有操作都由AngularJS $routeProvider路由器处理，在大多数情况下，您不必放置ng-click处理程序-它是通过更改路由（#哈希）完成的。 - hgoebl
目前，我使用ng-include和ng-switch来动态地包含和替换网页。你能告诉我哪种方式更好吗？我的意思是ng-include和$routeProvider。 - Chuck
有没有任何原因不能使用“标准”方式？https://docs.angularjs.org/tutorial/step_07 - hgoebl
为什么 href 中有一个井号？ - Chuck
我记不清楚了，但我相信AngularJS的路由器会自动检测浏览器是否能够通过哈希变化或路径变化（HTML5）来处理导航。在您的代码中，您只需要处理路径变化即可。 - hgoebl
0

我已经更新了你的代码。在你的body标签中添加ng-app directive。并且在你的HTML中将ng-click="handleClick"更改为ng-click="handleClick()"。

<body ng-app="app"><div ng-controller="SuiteSectionCtrl">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">All Suites</a>
        </li>
        <li><a ng-click="handleClick()">Suite1</a>
        </li>
        <li><a href="#">Suite2</a>
        </li>
        <li><a href="#">Suite3</a>
        </li>
    </ul>
    </div></body>

而我们的JS代码是

var executionAPP = angular.module('app',[])//register your app 
executionAPP.controller('SuiteSectionCtrl',['$scope',function($scope){

    $scope.oneAtATime = true;

    $scope.testSuites = [{title:"TestSuite1",content:"TestContent1"},
                         {title:"TestSuite2",content:"TestContent2"},
                         {title:"TestSuite3",content:"TestContent3"},
                         {title:"TestSuite4",content:"TestContent4"},
                         {title:"TestSuite5",content:"TestContent5"}];
    $scope.handleClick = function(){
        alert('Accordion clicked');
    };

}]);

已更新的Fiddle...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接