Question

我试图简单地用切换来改变按钮文本但是我没有这样做我不知道为什么。按钮只显示'ver fotos'并且没有改变我的第二个选项。也许我不能像这样两次点击？这是我的代码：

angular.module('app.controllers', [])
.controller('perfilCtrl', ['$scope', '$stateParams', "detailService",// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, detailService) {
$scope.detalhes=detailService.data;
$scope.goEsconder = false;
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Ver fotos' : 'Ver características';
   })

}])

<ion-view id="page4">
    <ion-content padding="true" class="backg">
        <div class="row">
            <div class="col">
                <h3 class="name">{{detalhes[0]}}</h3>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p class="descricao">{{detalhes[2]}}</p>
            </div>
        </div>
        <div class="row">
            <div class="col text-center" ui-sref="contacto"><button class="button b2">
                Contactar
                </button>
            </div>
            <div class="col text-center"><button class="button b3" ng-click="goEsconder = !goEsconder; toggle = !toggle">
                {{toggleText}}
                </button>
            </div>
        </div>
    </ion-content>
</ion-view>

Answer 1

我相信它运作正常：http://jsfiddle.net/Lvc0u55v/10594/

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.toggleText = 'click me'
    $scope.toggle = true
    $scope.$watch('toggle', function(){
        $scope.toggleText = $scope.toggle ? 'Ver fotos' : 'Ver características';
    })
}

HTML：

<div ng-controller="MyCtrl">
    <div class="col text-center">
        <button class="button b3" ng-click="toggle = !toggle">{{toggleText}}</button>
    </div>
</div>

Answer 2

使用对象，以便子范围将使用继承。 javascript中的原语没有继承。

所以会发生什么，你只是改变子范围中的原语，并且该更改是从父级隐藏的，因此手表不会触发

  $scope.myModel = { toggle: true };
  $scope.$watch('myModel.toggle', function(nVal, oVal) {
    $scope.toggleText = $scope.myModel.toggle ? 'Ver fotos' : 'Ver características';
  });

HTML

<button class="button b3" ng-click="myModel.toggle = !myModel.toggle">
  {{toggleText}}
</button>

的 DEMO

Answer 3

将观察者更改为使用true参数，这样：

$scope.$watch('toggle', function(toggle){
   $scope.toggleText = toggle ? 'Ver fotos' : 'Ver características';
}, true)

这将使你的代码工作，因为观察者不会在布尔值上本地工作（因为布尔值是通过javascript上的值传递的：因为你的观察者toggle总是如此）

然而，指定true参数会将您的观察者更改为深度观察者，从而能够捕获值更改而不仅仅是引用更改

按钮切换不使用angularjs

3 个答案: