美文网首页
ng-if 对作用域的影响

ng-if 对作用域的影响

作者: 一长亭 | 来源:发表于2017-03-22 10:26 被阅读0次

ng-if 隔离作用域


入坑情景:

在使用ui-bootstrap时,根据ui-bootstrap的指引:

官方JS:

angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;

  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.pageChanged = function() {
    $log.log('Page changed to: ' + $scope.currentPage);
  };

  $scope.maxSize = 5;
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
});

官方HTML:

<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" 
max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></ul>

在我的JADE中:

.page-split(ng-if="resTableData.length && isTable")
        ul(uib-pagination total-items="bigTotalItems" ng-model="currentPage" max-size="maxSize" 
        ng-change="pageChanged()" class="pagination-sm" boundary-link-numbers="true" rotate="false")

在我的Ctroller中,$scope.pageChanged,无论怎么触发,$scope.currentPage都是默认值,而不是像官网中切换变换页码值。

填坑


通过查询资料和咨询高人,得知ngIf当一个元素被ng-if从DOM中删除时,与其关联的作用域也会被销毁。而且当它重新加入DOM中时,则会生成一个新的作用域,而ng-show和ng-hide则不会。

另外,ngIf的优先级略高于ngView,如果ngIf的表达式值为true, ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先级较低就不会被执行。

所以,ui-bootstrap有一个它自己的作用域,在ng-if时被隔离了,$scope.currentPage就不会被访问到。解决方法:将ng-if改为ng-show

相关文章

  • ng-if 对作用域的影响

    ng-if 隔离作用域 入坑情景: 在使用ui-bootstrap时,根据ui-bootstrap的指引: 官方J...

  • 作用域对性能的影响

    作用域对性能的影响 作用域是理解JS的关键所在,同样作用域关系到性能。其实主要还是标识符的解析会影响到性能。而我们...

  • ng-if

    ng-if会(隐式地)产生新作用域,ng-switch、 ng-include等会动态创建一块界面的也是如此。这样...

  • JavaScript作用域解析

    无论是哪种语言,作用域都是一个非常重要的概念,同样,作用域对JavaScript有许多影响。从功能的角度来看,作用...

  • var与let对作用域的影响

    var与let区别: var可以声明全局变量与局部变量,并且具有变量提升机制; let声明块级变量,同时也是为了解...

  • ES6 块级作用域

    {}块级作用域,作用域之间互不影响(不管是父子还是孙子什么的,不像函数作用域,儿子没有可以找父亲要) let 解决...

  • 函数变量及四种函数类型

    变量起作用的代码范围称为变量的作用域 不同作用域内同名变量之间互不影响就像不同文件夹的同名文件间互不影响...

  • 2022-03-27

    什么是作用域 作用域规定了当前执行代码对变量的访问权限 作用域最大的作用就是变量隔离,不同作用域下的同名变量不会有...

  • 作用域

    什么是作用域 作用域规定了当前执行代码对变量的访问权限 作用域最大的作用就是变量隔离,不同作用域下的同名变量不会有...

  • 理解函数作用域和块级作用域

    前言 我们知道JavaScript中,作用域有函数作用域和块级作用域以及全局作用域,接触一段时间的伙伴,对这几概念...

网友评论

      本文标题:ng-if 对作用域的影响

      本文链接:https://www.haomeiwen.com/subject/aftonttx.html