小编ans*_*sen的帖子

我有一个类似于这个堆栈溢出问题的问题,除了答案似乎没有工作.我有一个表单,用户在其中创建一个包含可变数量子模型的容器模块.提交表单时,我必须保存容器,子模型,并确保hasMany关系仍然存在.我的代码(使用Ember-Cli):

容器:

var Container= DS.Model.extend({
    name: DS.attr('string'),
    submodels: DS.hasMany('submodel'),
    lastModified: DS.attr('date')
});

export default Container;

子模型:

    var Submodel= DS.Model.extend({
        char: DS.belongsTo('container'),
        name: DS.attr('string'),
        desc: DS.attr('string'),
        priority: DS.attr('number'),
        effort: DS.attr('number'),
        time: DS.attr('number')
    });

export default Submodel;

ContainersNewRoute:

 export default Ember.Route.extend({
        model: function() {
            return this.store.createRecord('container', {
                ...
            });
        }
    });

ContainersNewController:

export default Ember.ObjectController.extend({
    actions: {
        addSubmodel: function() {
            var submodels= this.get('model.submodels');

            submodels.addObject(this.store.createRecord('submodel', {
                ...
            }));
        },
        saveNewContainer: function () {
            var container = this.get('model');

            container.save().then(function(){
                var promises …

最初在我的应用程序中,我创建了具有非常基本的$ http调用的控制器,通过从url($ routeParams)获取对象的ID来获取资源.Ng-repeat正确显示结果.

但是,我注意到在后来的视图中刷新(不同的控制器)清除了数据并打破了页面.因此,我在要在多个控制器中使用的服务上创建了一个函数,以检查数据是否可用并作出如下反应:

1)如果定义了资源,则返回它(没有API调用)2)如果未定义资源,则从URL获取id并从API获取它3)如果资源未定义且您无法获取ID,只返回false.

但是,这破坏了代码:在服务返回数据之前呈现的模板,并且ng-repeat没有更新.代码如下所示:

angular.module('myApp', ['ngCookies'])
    .config(...)
    .service('myService', ['$cookies', '$http', function($cookies, $http) {
        myData = {};

        return {
            getData:function(dataID) {
                if(myData.name) {return myData);
                else if (dataID && dataID !== '') {
                    $http.get('/api/data/' + dataID)
                        .success(function(data) {
                            myData = data.object;
                            $cookies.dataID = data.object.id;
                            return myData;
                        }
                }
                else { return false; }
            }
        }
    }]);

function myCtrl($scope, $http, $routeParams, myService) {
    $scope.data = myService.getData($routeParams.dataID);

    ...
}

这是模板.它是在玉中,这意味着而不是尖括号,你只需在括号中列出带有参数的元素,然后在括号后面列出内容.

h2 My heading
ul
    li(ng-repeat='option in data')
        a(href="#", ng-click='someFuncInCtrl(option.name)')  {{ option.name }} …

在Angular 1中,创建一个用旋转器替换内容的加载指令相当容易,并且使用如下:

<div isLoading="$scope.contentIsLoading"></div>

其中contentHasLoaded是您在数据调用后在控制器中设置的简单布尔值.该指令本身很简单,大部分工作都是在模板中完成的:

<div class="spinner" ng-if="$scope.isLoading"></div>
<div ng-transclude ng-if="!$scope.isLoading"></div>

在Angular 2+中有一种"干净"的方法吗？通过干净我的意思是1)在Angular中,不使用vanilla JS直接操作DOM和2)可以作为现有元素的单个属性实现吗？

我确实看到这篇文章是后备:图像加载指令.但是,它比我想要的更冗长:使用常规组件需要我将所有异步内容包装在新标签中而不是仅添加属性.

我真正想要的是结构指令中的东西(它应该被设计用于"操纵DOM".)然而,我见过的所有例子都是像*ngIf这样隐藏内容的东西,但是不插入新内容.具体而言,结构模板1)可以具有模板,或2)插入组件或3)插入简单的东西<div class="spinner"></div>.到目前为止,这是我最好的尝试:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[loading]',
  inputs: ['loading']
})
export class LoadingDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
    ) { }

  @Input() set loading (isLoading: boolean) {
    if (isLoading) {
      this.viewContainer.clear();
      // INSERT A COMPONENT, DIV, TEMPLATE, SOMETHING HERE FOR SPINNER
    } else {
      this.viewContainer.clear();
      // If not loading, insert the …