Angular 指令使用 Typescript 接收对象作为属性

Question

我正在使用 Angular 1.5.8 和 Typescript 进行开发我有一个指令在另一个指令（当然还有另一个控制器）的范围内使用。假设指令 1、控制器 1 和指令 2、控制器 2。鉴于Controller1已经有了用户信息，我想通过Directive2将这个用户信息传递给Controller2，防止后台再次获取信息。我不确定这是否可以完成，但如果是这样的话就太好了:)

下面是帮助我解释的代码：

指令 1 HTML:

<div>
    ...
    <directive2 user="{{ctrl.loggedUser}}"></directive2>
    ...
</div>

loggedUser 通过调用后端加载到 Controller1 构造函数中。

Directive2 和 Directive2Ctrl Typescript 代码：

class Directive2 implements ng.IDirective {
    controller = "Directive2Ctrl";
    controllerAs = "d2Ctrl";
    bindToController = {
        user: "@"
    };
    restrict = "E";
    templateUrl = "directive2.html";

    static factory(): ng.IDirectiveFactory {
        const directive = () => new Directive2();
        return directive;
    }
}
angular
    .module("app")
    .controller("Directive2Ctrl", Directive2Ctrl)
    .directive("directive2", Directive2.factory());


class Directive2Ctrl implements IDirective2Ctrl {
    public user: User;

    constructor(user: User) {
         // user is undefined
    }

    $onInit(user: User): void {
        // user is undefined
    }
}

我找不到将用户对象传递给 Directive2Ctrl 的方法（甚至不确定是否可行）。

Answer 1

抱歉，我想知道您是否还需要设置 scope = {}

Answer 2

如果您想在应用程序的不同位置之间共享数据，只需将其放在服务中并在需要数据的任何地方使用 DI。

也就是说，获取数据，将其存储在服务中，然后使用 DI 使数据在不同位置可用。无需通过多层绑定传递数据，更易于使用服务。

var mod = angular.module('testApp', ['ngRoute']);

mod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/intern', {
        template: '<div class="outer" ng-controller="InternController">{{User.firstName}} <div class="nested" ng-controller="NestedController">{{NestedUser.lastName}}<test-dir></test-dir></div></div>',
        resolve: {
          userResolve: function($q, $timeout, User) {
            var deferred = $q.defer();
          
            // mock server call, which returns server data
            $timeout(function() {
              var mockUserResp = {
                firstName: 'John',
                lastName: 'Rambo'
              };
              User.setUser(mockUserResp);
            
              deferred.resolve();
            }, 1000);
          
            return deferred.promise;
          }
        }
      }).
      otherwise({
        redirectTo: '/intern'
      });
  }]);

mod.factory('User', function() {
  var _user = null;
  return {
    setUser: function(user) {
      _user = user;
    },
    getUser: function() {
      return _user;
    }
  }  
});

mod.controller('InternController', function($scope, User) {
  $scope.User = User.getUser();
});

mod.controller('NestedController', function($scope, User) {
  $scope.NestedUser = User.getUser();
});

mod.directive('testDir', function(User) {
  return {
    restrict: 'EA',
    scope: {},
    template: '<div class="dir">{{firstName}} is a cool guy.</div>',
    link: function(scope) {
      scope.firstName = User.getUser().firstName;
    }
  };
});

.outer {
  border: 1px solid green;
}

.nested {
  border: 1px solid blue;
}

.dir {
  border: 1px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-route.min.js"></script>


<div ng-app="testApp">
  <div ng-view></div>
</div>

Answer 3

使用 "scope" 属性代替 "bindToController" 属性，并将您的“@”替换为“=”。然后我为我的特定范围使用一个接口来获得自动完成。

export interface IMyDirectiveScope extends ng.IScope {
    user: any;
}

export class Myirective {
    public restrict: string = 'E';
    public templateUrl = "/mytemplate.html";
    public link: (scope: IMyDirectiveScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController) => void;
    public scope = {
        user: "="
    };

    constructor() {
        var context = this;
        context.link = (scope: IMyDirectiveScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController) => {
           //INSERT YOUR CODE
           //console.log(scope.user);
        };
    }

    public static Factory() {
        var directive = () => {
            return new MyDirective();
        };

        return directive;
    }
}

在你的 html 中，去掉花括号。

<div>
    ...
    <directive2 user="ctrl.loggedUser"></directive2>
    ...
</div>

Answer 4

应该是这样的。但如果它仍然不适合你，你可以创建一个简单的 plunker，我会在那里修复它。干杯！

<div>
    ...
    <directive2 user="ctrl.loggedUser"></directive2>
    ...
</div>

`

class Directive2 implements ng.IDirective {
    controller = "Directive2Ctrl";
    controllerAs = "d2Ctrl";
    scope = {},
    bindToController = {
        user: "="
    };
    restrict = "E";
    templateUrl = "directive2.html";

    static factory(): ng.IDirectiveFactory {
        return () => new Directive2();
    }
}
angular
    .module("app")
    .controller("Directive2Ctrl", Directive2Ctrl)
    .directive("directive2", Directive2.factory());


class Directive2Ctrl implements IDirective2Ctrl {
    public user: User;

    $onInit(user: User): void {
        // user should be available
        console.log(this.user);
    }
}

Answer 5

要按照我最初的要求进行操作，需要正确使用范围。

这是另一个很好解释的问题，它正确使用了范围：

Angular 指令使用 Typescript 接收对象作为属性

Angular directive receiving object as attribute using Typescript

angularjs

typescript

angularjs-directive

typescript1.8