angularJS，UI沒有更新

下面是一個簡單的例子：http://codepen.io/anon/pen/ZQqxaj angularJS，UI沒有更新

在這個例子中，我想，如果在底部隱藏「取消」按鍵，這兩個按鍵。

問題是，即使在inputFocused設置爲false之後，UI（ng-show）也不會更新。

<div ng-controller="MyController"> 
    <md-input-container> 
     <label> New Comment </label> 
     <textarea ng-model="newCommentContent" ng-focus="isInputFocused = true"> </textarea> 
    </md-input-container> 
    <div ng-show="isInputFocused"> 
     <md-button class="md-raised md-primary">Post</md-button> 
     <md-button class="md-raised" ng-click="cancelNewComment()">Cancel</md-button> 
    </div> 
</div>

而且JS

angular.module('BlankApp', ['ngMaterial']) 
    .controller('MyController', function($scope) { 
    $scope.newCommentContent = ''; 
    $scope.isInputFocused = false; 

    $scope.cancelNewComment = function() { 
     $('input').blur(); // be sure input is not focused 
     isInputFocused = false; 
    }; 
    });

謝謝

來源

2016-02-06 Epitouille

簡短的回答：我會建議使用ControllerAs語法。 Here的解決方案。

angular.module('BlankApp', ['ngMaterial']) 
    .controller('MyController', function() { 
    this.newCommentContent = ''; 

    this.cancelNewComment = function() { 
     this.newCommentContent = ''; 
    }; 
});

長答案：當你使用舊的$ scope語法時，你永遠不知道你現在使用的是哪個範圍。材料設計指令和其他指令可以創建其範圍，並且您將丟失數據鏈接。

來源

2016-02-06 17:30:13

不幸的是，這並沒有讓我的按鈕隱藏當我點擊「取消」 – Epitouille

我已經更新了代碼，請 –

問題是你正在分配一個未定義的變量而不是範圍變量。

沒有必要使用jQuery儘快模糊元素......當您點擊文本區域外，將通過瀏覽器

$scope.cancelNewComment = function() { 
    // `isInputFocused` is undefined and not in scope 
    $scope.isInputFocused = false; 
};

來源

2016-02-06 17:31:14 charlietfl

謝謝回答，但增加$ scope（http://codepen.io/anon/pen/jWezgp）不會讓我的按鈕隱藏，當我點擊「取消」 – Epitouille

你是否刪除了'$（'input'）'？你忘了包括jQuery.js，並拋出錯誤...看看你的控制檯 – charlietfl

好吧，我的壞，那是jquery – Epitouille

模糊不清我只是chcked，它在我們的代碼工作。替換：

click="cancelNewComment()"

與

click="isInputFocused = false"

來源

2016-02-06 17:49:46 pritesh

你是不是在更新你的函數$scope.isInputFocused;您正在更新未聲明的本地變量isInputFocused。

請注意，點擊取消按鈕時，它總是有焦點。

的功能更改爲：

$scope.cancelNewComment = function() { 
    $scope.isInputFocused = false; 
};

來源

2016-02-07 15:54:46 DavidNJ

angularJS，UI沒有更新

回答

相關問題