使用函数和使用内联表达式设置作用域变量有什么区别 [英] What's the difference between using function and using inline expression to set scope variable

问题描述

我发现执行函数和使用表达式设置变量之间存在一些差异，特别是ng-if似乎无法检测到表达式所做的更改.我不明白为什么.

伪代码:

if($scope.editingProfile)显示编辑部分单击(返回列表按钮)隐藏编辑部分

backToList 按钮有一个 ng-click 属性，当我编写 ng-click="backToList()" 来执行 $scope.backToList() 其中 $scope.editingProfile 设置为 false 效果很好.但是当我写 ng-click="editingProfile=false" 直接设置变量时，用于隐藏部分的 ng-if 将不起作用.

小提琴:http://jsfiddle.net/brfbtbd7/1/

解决方案

这是因为 ng-if 指令创建了一个子作用域.所以 ng-if="editingProfile" 是父级上的 editing profile 对象，它被继承到由 ng-if 创建的子作用域.这就是@Editing {{editingProfile.name}}
显示的内容.当您执行 ng-click="editingProfile=false" 时，您实际上是在更新子作用域继承的 editingProfile 版本，该版本不会反映在父作用域中.但是当你做 ng-click="backToList()" 函数在控制器中，所以 $scope.editingProfile 指的是控制器上的那个(父)因此，该更改被反映并且 ng-if 变为假并隐藏内容.

您可以通过在范围属性层次结构中再增加一层来解决这个问题.

angular.module("testApp", []).controller("editCtrl",功能($范围){$scope.model = {};$scope.model.editingProfile = null;$scope.edit = function() {$scope.model.editingProfile = {名称:测试"};}$scope.backToList = function() {$scope.model.editingProfile = null;}})

和

编辑{{model.editingProfile.name}}<br><a ng-click="backToList()">点击执行返回功能</a><br/><a ng-click="model.editingProfile=null">点击设置变量返回(不工作)</a>

小提琴

I found some differences between executing function and using expression to set variable, specifically, it seems that ng-if fails to detect the changes made by expression. I don't understand why.

Pseudo-code:

if($scope.editingProfile)
  display edit section
click(backToList button)
  hide edit section

The backToList button has a ng-click attribute, when I write ng-click="backToList()" to execute $scope.backToList() in which the $scope.editingProfile is set to false it works good. But when I write ng-click="editingProfile=false" to set the variable directly, the ng-if used to hide the section won't work.

fiddle: http://jsfiddle.net/brfbtbd7/1/

解决方案

It is because ng-if directive creates a child scope. So ng-if="editingProfile" is the editing profile object on the parent which gets inherited to the child scope created by the ng-if. That is what gets displayed @ Editing {{editingProfile.name}}<br>. When you do ng-click="editingProfile=false" you are actually updating the child scope's inherited version of editingProfile which does not gets reflected in the one at the parent. But when you do ng-click="backToList()" The function is in the controller and so the $scope.editingProfile refers to the one on the controller (parent) hence that change is reflected and ng-if becomes falsy and it hides the content.

You could solve this my adding one more level in the scope property hierarchy.

angular.module("testApp", []).controller("editCtrl",
    function ($scope){
      $scope.model = {};
      $scope.model.editingProfile = null;
      $scope.edit = function() {
          $scope.model.editingProfile = {
              name: "test"
          };
      }
      $scope.backToList = function() {
          $scope.model.editingProfile = null;
      }
    }    
)

and

<div ng-if="model.editingProfile">Editing {{model.editingProfile.name}}
    <br> <a ng-click="backToList()">click to execute function to go back</a>

    <br/> <a ng-click="model.editingProfile=null">click to set variable to go back(NOT working)</a> 
</div>

Fiddle

这篇关于使用函数和使用内联表达式设置作用域变量有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！