2

因此，我正在阅读有关迁移到 Angular 2.0 的信息，并试图了解指令/组件可以相互通信的更好方式。

我遵循了这里的一些指导方针，这些指导方针建议利用基于命名空间的继承在指令之间共享信息。（这个）

它建议：不要使用 $scope.someFunction()，而是使用 $scope.container.someFunction()。变量也是如此。代替 $scope.variable，使用 $scope.container.variable。

所以，目前在我的项目中，我几乎没有需要相互沟通的指令（更多的父子关系）。

因此，我在Angular 1.4之后使用 bindToController 将容器从父指令传递到其所有子指令。

directive ('myDirective', function () {
     return {
     restrict: 'E',
     scope: {},
     bindToController: {
       container: '='
     },
     controllerAs: 'ctrl',
     templateUrl: 'components/my-page.html',
     controller: MyController
};

并从父指令传递它

 <my-directive container="container"/>

由于我有许多需要绑定的变量，将所有这些变量移动到容器中并绑定整个容器是否很好？就像是：

 $scope.container = {
   variable1: ...
   variable2: ...
   function1: ...
   function2: ...
}

或单独绑定它们？

 bindToController: {
   variable1: '=',
   variable2: '=',
   ....
 },

另外，我读到我也可以使用链接来绑定，这让我更加困惑。我应该使用下面的链接吗？还是上面的 bindToController 来绑定整个容器？

 link: function($scope, $element, $attrs, controller) {
   // access controller.container.variable1 here
 }

有没有好的设计实践？迁移到 Angular2.0 的优缺点和难易程度？

我知道这是一个开放式的问题，但是一些指导，常见的做法会非常有帮助。

4

1 回答 1

1

使用以下过程：

  • 将 Angular 1.x$scope相关方法转换为 TypeScript Angular 1.xcontrollerAs方法
  • 将 TypeScript Angular 1.x 指令转换为 Angular 2.0 指令

例如：

class ToDoListController {
    name: string;
    listItems: any[];

    newItemName: string;

    constructor() {
        this.name = "";
        this.listItems = [];
    }

    save() {
    }

    toggle(listItem: ListItem){
    }
}

可以通过以下方式在没有$scope依赖关系的情况下进行测试：

module TypeScriptAndAngular.Controllers.Tests {
    describe("ToDoListController Tests", () => {
        var listScopeMock: Directives.IToDoListScope;

        describe("Constructor Tests", () => {

            it("Constructor sets defaults as expected", () => {
                // Arrange
                var name = "A List Name";
                listScopeMock = {
                    name: name
                }

                // Act
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Assert
                expect(ctrl.name).toEqual(name);
                expect(ctrl.listItems).toBeDefined();
                expect(ctrl.newItemName).toBeUndefined();
                expect(ctrl.listItems.length).toBe(0);
            });
        });

        describe("Save Tests", () => {
            it("Save does nothing if no task name has been entered", () => {
                // Arrange
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(0);
            });

            it("Save does nothing if task name is empty string", () => {
                // Arrange
                var ctrl = new Controllers.ToDoListController(listScopeMock);
                ctrl.newItemName = "";

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(0);
            });

            it("Save adds a new item with the specified name", () => {
                // Arrange
                var taskName = "A new task";
                var ctrl = new Controllers.ToDoListController(listScopeMock);
                ctrl.newItemName = taskName;

                // Act
                ctrl.save();

                // Assert
                expect(ctrl.listItems.length).toBe(1);
                expect(ctrl.listItems[0].name).toBe(taskName);
            });
        });

        describe("Toggle Tests", () => {
            it("Toggle sets complete to FALSE if it was originally TRUE", () => {
                // Arrange
                var item = new ListItem("A new item", true);
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.toggle(item);

                // Assert
                expect(item.isComplete).toBe(false);
            });

            it("Toggle sets complete to TRUE if it was originally FALSE", () => {
                // Arrange
                var item = new ListItem("A new item", false);
                var ctrl = new Controllers.ToDoListController(listScopeMock);

                // Act
                ctrl.toggle(item);

                // Assert
                expect(item.isComplete).toBe(true);
            });
        });
    });
}

参考

于 2016-01-26T05:21:52.813 回答