Question

摘自Apress书的例子。

MyAppModule.js

// Create the module
angular.module('myAppModule', []);

// configure the module with a controller
angular.module('myAppModule').controller('myProductDetailCtrl', function ($scope) {

        // Hide colors by default
        $scope.isHidden = true;

        // a function, placed into the scope, which
        // can toggle the value of the isHidden variable
        $scope.showHideColors = function () {
            $scope.isHidden = !$scope.isHidden;
        }

    }
);

我将其修改为：

// Create the module
var myAppModule = angular.module('myAppModule', []);

// configure the module with a controller
myAppModule.controller('myProductDetailCtrl', ['$scope',function ($scope) {

        // Hide colors by default
        $scope.isHidden = true;

        // a function, placed into the scope, which
        // can toggle the value of the isHidden variable
        $scope.showHideColors = function () {
            $scope.isHidden = !$scope.isHidden;
        }

    }
]);

我修改了这个 product-detail.html文件

    <!DOCTYPE html >
<html ng-app="myAppModule">
<head>
    <title></title>
    <script src="js/angular.js"></script>
    <script src="js/myAppModule.js"></script>
    <style>

        body {
            font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
        }

        div {
            margin: 20px;
            padding: 20px;
            font-size: 16px;
            color:#ffffff;
        }

        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #blue {
            background-color: blue;
        }

        #purple {
            background-color: purple;
        }

        #gray {
            background-color: gray;
        }

        #olive {
            background-color: olive;
        }

    </style>
</head>
<body ng-controller="myProductDetailCtrl">

<h2>AngularJS Socks</h2>

<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>

<button ng-click="showHideColors()" type="button">
    {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>

<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>

</body>
</html>

到此：（移动了ng-app指令）

    <!DOCTYPE html >
<html >
<head>
    <title></title>
    <script src="js/angular.js"></script>
    <script src="js/myAppModule.js"></script>
    <style>

        body {
            font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
        }

        div {
            margin: 20px;
            padding: 20px;
            font-size: 16px;
            color:#ffffff;
        }

        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #blue {
            background-color: blue;
        }

        #purple {
            background-color: purple;
        }

        #gray {
            background-color: gray;
        }

        #olive {
            background-color: olive;
        }

    </style>
</head>
<body ng-app="myAppModule"  ng-controller="myProductDetailCtrl">

<h2>AngularJS Socks</h2>

<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>

<button ng-click="showHideColors()" type="button">
    {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>

<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>

</body>
</html>

按钮标签/文字显示：

{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}

按下它什么也没做。

Answer 1

好像你有AngularJS的旧版本。

以下是JSFiddle中的工作版本。

AngularJS按钮文本无效

1 个答案: