我有兴趣将AngularJS用于我正在进行的项目.我已经阅读了很多关于它的内容,观看了视频,完成了几个示例应用程序.这一切都有道理,我买入概念.

我正在做的项目需要做一些DOM特效(动态地移动页面等等)并合并一些D3.js图表​​.

我经常使用jQuery; 我明白并喜欢它.我已经使用了AngularJS来获得基础知识.我完全不明白如何$("#my-element").slideUp()从Angular中调用jQuery这样的东西.例如:

假设我在某个页面中有以下HTML:

<!-- somewhere in app.html -->
<div id="my-element">
  <p>Here's some data about your stuff...!</p>
  <button id="hider">Hide this (but with a cool transition)</button>
</div>

并在网站JS:

// somewhere in app.js ... pretend it's all nice and DRY.
  function main () {
    $("#my-element button")
      .click(function () { $("#my-element").slideUp()});
  }    
  $(main);

我可以告诉他们如何为Angular完成接近这个的最好的事情是:

HTML

<!-- somewhere in app.html -->
<div ng-controller="Data">
  <p>Here's some data about your stuff...!</p>
  <button ng-click="slideUp()">Hide this (but with a cool transition)</button>
</div>

CSS:

// somewhere …

我正在使用AngularUI datepicker.

我有两个相互影响的日期选择器.一个是例如"开始日期"而另一个是"结束日期".我想要消除无效日期的选项(即结束日期早于开始日期,反之亦然),而不是为两个日期选择器创建验证.

有没有办法在选择日期时重新​​触发日期禁用属性？(重新触发OTHER日期选择器的日期禁用)

我的傻瓜:我有一个开始和结束日期,你可以看到当你打开每个日期选择器时,你不能选择高于结束日期的开始日期,反之亦然.但是,如果我将开始日期更改为11/21,我希望更新结束日期的日期选择器,以便11/20不再可单击.有没有办法做到这一点？

http://plnkr.co/edit/TgisJnSwQItDeCuIReLL?p=preview

我有一个对象数组,即过滤和分页,现在我想按不同的对象属性排序列表项.

我尝试orderBy过滤器如下:

<th><a href='' ng-click="reverse = sortParam == 'title' && !reverse; sortParam = 'title'">Title</a></th>

<tr ng-repeat="item in pagedItems|filter:filterParam|orderBy:sortParam:reverse">
    <td>{{ item.title }}</td>
</tr>

这似乎工作正常,单击Title链接,按字母顺序排序或按字母顺序反转,具体取决于当前状态.

但这里的问题是只有pagedItems正在排序,这是有意义的,因为我们正在应用orderBy过滤器pagedItems.我想要实现的是在应用过滤器时订购整个项目集(不仅仅是当前分页的项目).

为了实现这一点,我想我会在控制器范围内使用一种方法.所以我把上面改为:

/** In the Template */

<th><a href='' ng-click="sortItems('title')">Title</a></th>

<tr ng-repeat="item in pagedItems|filter:filterParam">
    <td>{{ item.title }}</td>
</tr>


/** In the Controller */

$scope.sortItems = function(value) {
    $scope.filtered = $filter('orderBy')($scope.filtered, value);
};

$scope.$watch('currentPage + numPerPage + filtered', function() {
    $scope.pagedItems = getPagedItems($scope, 'filtered');
});

该sortItems方法工作并更改顺序,但视图中的项目未更新,因为 …

我正在使用http://angular-google-maps.org/这是一个很好的角谷歌地图库.但我想使用不在angularjs上下文中加载的map实例,如下所示:

$scope.map = {
events: {
    tilesloaded: function (map) {
            $scope.$apply(function () {
                $scope.mapInstance = map;           
            });
        }
    }
}

好的我有mapInstance,我可以通过编程方式使用它.但是在应用程序生命周期中,这种情况要迟到 - 所以换句话说,我想在其他代码之前加载整个指令(并获取地图实例) - 我只是不想使用其他地图事件.

我有一个简单的案例:

<div ng-controller="myController">
  <tabset>
    <tab>
      <form name="myForm"></form>
    </tab>
  </tabset>
</div>

现在,在myController方法中,我想访问myForm来调用$ setPristine:

$scope.myForm.$setPristine()

但是我不能.tabset/tab创建隔离/继承范围.这只是一个示例,但是当使用多次创建隔离范围的angular js指令时,我遇到了这个问题.

我该如何克服这个问题？在过去我做了类似的事情(使用ng-table也创建了新的范围):

ng-init="$parent.saataaTable = this"

但它远非完美.

我想使用UI模式创建一个非常简单的确认框,我已经成功地用它来制作过去从外部文件加载模板和控制器的复杂模态.

这很简单,虽然我不想依赖外部模板和控制器文件,只是一个带有关闭按钮的简单框,它以某种方式连接到模态实例上直接声明的控制器.

这是我尝试过的失败......

var modalInstance = $modal.open({
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){

        $scope.cancel = function(){
            alert("Cancelled");
        };

    }
});

基本上,我希望用户能够拖放项目或单击向上/向下箭头来移动列表中的项目.

有没有一种很好的方法来更新与ui-sortable/angular-ui一起使用的项目索引？

谢谢.

更新

我们能够通过在控制器中添加一个函数来解决这个问题,该函数将从数组中删除该项并将其添加回一个大于或小于其原始位置的索引中.这是一个草率的例子:

$scope.upDown = function(oldIndex, newIndex) {
    var item = $scope.list[oldIndex];
    $scope.list.splice(oldIndex,1);
    $scope.list.splice(newIndex,0,item);
};

http://jsfiddle.net/69auq/1/

你需要添加一个检查,如果它是数组中的第一个或最后一个elem,相应地禁用向上或向下.

有没有办法获取手风琴组是否开放？我知道有isOpen指令,但我不确定是否有办法在html中访问该状态.使用(和滥用？)双向绑定我可以设置一个变量来保持该状态,但是如果不执行像isOpen0,isOpen1,isOpen2等那样的嵌套手风琴它将无法解决.我也可以使用ng-init来"声明"一个新的isOpen在嵌套手风琴的范围,但这听起来不是一个好主意.

  <accordion>
    <accordion-group is-open="isOpen">
      <accordion-heading>
         <div ng-class="{'myClass': isOpen}">Static Text</div>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

http://plnkr.co/edit/l5y4raei99pedNWcE225

我想在angularjs控制器中激活js代码.

我有这个:

$scope.$on('$destroy', function () {
            alert('page1');
        });

当我正在使用该控制器的页面导航时,这工作正常,但是当我关闭标签/浏览器时,它无法正常工作.

当标签/浏览器关闭时,我是否需要使用其他一些代码来激活js代码？

提前谢谢,Laziale

我试图用可选择和可移动的选项实现角度垫片.但问题是占位符在加载时移动到顶部.我不知道我在代码上做了什么错.请有人帮我解决这个问题.

在下面添加了GIF

我的代码是

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable"
             [removable]="removable" (remove)="remove(keyword)">
      {{keyword}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Keywords"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-chip-list>
</mat-form-field>

和ts是

  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;
  separatorKeysCodes = [ENTER, COMMA];
  keywords= [];   // At time load i need this to be empty


public add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;
    if ((value || '').trim()) …