我有两个关于它如何工作的想法.

第一种方式：
当ng-repeat的观察者触发时,它会删除它从DOM创建的所有元素,然后在其位置创建所有新元素,即使这些元素中的许多元素相同(例如,在将1个项目添加到后备阵列的情况下).

第二种方式：由于ng-repeat已经跟踪哪些元素与其后备集合中的哪些项目相关,因此它只删除集合中不再存在的项目,并为集合中新增的项目创建新元素.

这是为什么？为什么？

The ngRepeat directive provides a way to render a collection of items given a template. To do this,AngularJS compiles the given template and then clones it for each unique item in the collection. As the collection is mutated by the Controller,AngularJS adds,removes,and updates the relevant DOM elements as needed.

But,how does AngularJS kNow which actions to perform when? If you start to test the rendering,you’ll discover that AngularJS doesn’t brute force DOM creation; that is,it doesn’t recreate the DOM for every rendering. Instead,it only creates a new DOM element when a completely new item has been introduced to the collection. If an existing item has been updated,AngularJS merely updates the relevant DOM properties rather than creating a new DOM node.

这仍然会不必要地影响性能,即在集合中传递元素按值时(在上面链接的博客文章中有一个很好的例子).这就是为什么Angular supports “track by” for ngRepeat从版本1.2开始：这是一种帮助Angular决定何时创建DOM的方法：

With this association in place,AngularJS will not $destroy and re-create DOM nodes unnecessarily. This can have a huge performance and user experience benefit.

官方文件states：

You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection.

For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same.

<section id="social">
    <h2>Social Profiles</h2>
    <a href="#"https://www.jb51.cc/tag/irs/" target="_blank">irst"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><ihttps://www.jb51.cc/tag/RSS/" target="_blank">RSS"></i></a>
    <div></div>
</section>

对此

<section id="social">
    <h2>Social Profiles</h2>
    <a ng-repeat="sMedia in socialMedia" ng-if="$first" href="#" >
        <i></i>
    </a>
    <div></div>
</section>

一切似乎都很好，除非我找不到一种方法，在ng-repeat的最后一个元素中的第一个元素和class =“last”中添加class =“first”。

<a ng-repeat="sMedia in socialMedia" ng-https://www.jb51.cc/tag/irs/" target="_blank">irst': $first,'last': $last}" href="#" >

看到他们如何工作：https://docs.angularjs.org/api/ng/directive/ngRepeat

<ui-layout options="{ flow: 'column' }">
     <div ui-layout-container size="15%"> sidebar </div>
     <div ui-layout-container min-size="65%"> main </div>
     <div ui-layout-container ng-if="haveSelected()" size="20%"> props </div>
</ui-layout>

解决方法

ui-layout(options="{ flow: 'column' }",ng-if="showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade
  div(ui-layout-container)
    include ./thirdPanel.jade
ui-layout(options="{ flow: 'column' }",ng-if="!showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade

有没有办法监控月份按钮上的点击事件？

TIA
山姆

我认为最好的方法是在datepicker指令上创建一个’decorator’,以便为它添加功能.如果覆盖指令的’compile’函数,则可以访问其作用域.

你在module.config函数中执行此操作：

$provide.decorator('datepickerDirective',function($delegate) {
    var directive = $delegate[0];

    /* Override compile */
    var link = directive.link;

    directive.compile = function() {
        return function(scope,element,attrs,ctrl) {
            link.apply(this,arguments);

            scope.$watch('activeDateId',function() {
              console.log('switched');
            });
        }
    };

    return $delegate;
});

编辑

我遇到了与此类似的代码问题,如果您在同一天切换月份和2个月的第一个日期,则$w​​atch将不会触发.你可以通过在Datepicker的控制器中观察属性’activeDate’的值来解决这个问题：

scope.$watch(function() {
              return ctrl.activeDate.getTime();
            },function() {
              console.log('switched');
            });