Question

所以，我正在阅读有关迁移到Angular 2.0并尝试理解指令/组件可以相互通信的更好方法的内容。

我遵循了一些指导原则，建议利用基于命名空间的继承来在指令之间共享信息。（this）

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

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

所以，我在 Angular 1.4 之后使用bindToController将一个容器从parent指令传递到它的所有子指令。

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？

我理解这是一个有点开放式的问题，但是一些指导，通常的做法会非常有用。

Answer 1

使用以下过程：

将Angular 1.x $scope依赖方法转换为TypeScript Angular 1.x controllerAs方法
将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);
            });
        });
    });
}

<强>参考

迁移到Angular 2.0和BindToController

1 个答案: