Question

我正在做一个AngularJS的例子，但它不起作用。它应该显示一个带有三个按钮的页面，但按钮不会出现。

这是使用服务的一个例子。

这是我的代码。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Services and Modules</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.data = {
                cities: ["London", "New York", "Paris"],
                totalClicks: 0
            };
            $scope.$watch('data.totalClicks', function (newVal) {
                console.log("Total click count: " + newVal);
            });
        })
        .directive("triButton", function () {
            return {
                scope: { counter: "=counter" },
                link: function (scope, element, attrs) {
                    element.on("click", function (event) {
                        console.log("Button click: " + event.target.innerText);
                        scope.$apply(function () {
                            scope.counter++;
                        });
                    });
                }
            }
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <div class="btn-group" tri-button
             counter="data.totalClicks" source="data.cities">
            <button class="btn btn-default"                    ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
</body>
</html>

＆＃13;

我认为问题在于行

范围：{counter：＆＃34; = counter＆＃34; }，

如果我把它取下来，就会出现底部，但应用程序不起作用。

我缺少什么？

由于

AngularJS指令按钮不会出现

0 个答案: