Question

我正在尝试迁移到Angular 2的处理方式，并从现有控制器中删除逻辑是我的第一个目标。我面临的一个问题是如何根据服务/工厂中的值切换元素的可见性。

以前我会;

1）将服务注入控制器

.controller(MyController, function(MyService))

2）将其作为变量公开（使用controllerAs语法）

this.showWhen = MyService.serverHasProcessed;

3）使用了ng-show / ng-hide指令

<div ng-show="myCtrl.showWhen">...

由于控制器将在Angular 2中死亡，我迁移的第一条路径是创建我自己的指令。我在那里注入了服务，然后使用$ element.hide（）/ $ element.show（），但这些方法在angular元素上不可用。

我应该继续这种方式并复制ng-show指令代码;

$animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');

还是有更好的方法？

Answer 1

创建自己的指令是朝着有条不紊的方向迈出的一个很好的一步。 Angular 2.0将会杀死控制器，但更多的是杀死ng-controller。

Angular 2将类作为组件模型的一部分，Angular 1中的控制器可以是类，因为在内部使用new关键字实例化控制器函数。

因此Angular 2中的组件模型与Angular 1中的指令控制器有些可比。

Angular 1（ES6）

function helloAppDirective() {
  return {
    restrict: 'E',
    template: '<span>{{helloApp.greeting}}</span>',
    controller: HelloAppController,
    controllerAs: 'helloApp'
  }
}

angular.module('helloModule', [])
       .directive('helloApp', helloAppDirective);

class HelloAppController {
  greeting: string;
  constructor() {
    this.greeting = 'hello';
  }
}

Angular 2

@Component({
  selector: 'hello-app',
  template: new TemplateConfig({
    inline: '<span>{{greeting}}</span>',
    directives: []
  })
})
class HelloRootCmp {
  greeting:string;
  constructor() {
    this.greeting = 'hello';
  }
}

基本上DDO正在转向@attribute。

根据服务值显示和隐藏元素

1 个答案: