为什么在指令标记内传递对象时我得到字符串

Why when passing object inside the directive tag I get string

我无法访问我在指令中传递给它的对象。

// inside dialogController
showAlert(ev) {
    this.mdDialog.show({
            template:"<loader my-master="+this.masterCtrl+"></loader>"
  });

// when debugging, I saw this.masterCtrl is exist as Object 


//inside loader Controller:

export function loader() {
  'ngInject';
  let directive = {
    templateUrl: "app/components/excelLoader/loader.html",
    controller: loaderController,
    controllerAs: 'vm',
    scope: {
      words: '=',
      master:'=myMaster'
    },
    replace: true,
    bindToController: true,
    link: linkFunc
  };


   function linkFunc(scope, element, attr, ctrl) {
    let vm = scope.vm;
    ctrl.master=attr.myMaster;
  }
  return directive;
}
class loaderController {
  constructor() {
    'ngInject';
    console.log(this.master); //prints string "this.masterCtrl" instead of the Object! 
 }
}

将 this.masterCtrl 从 dialogController 传递到 loader 指令的正确方法是什么以及如何在 loader 指令中使用 access 它?

在您的 link 函数中,赋值 ctrl.master = scope.master; attr.myMaster 将从 html 标记中读取属性值并且将是一个字符串。 scope.master 将由 angular 计算。

这是你想要的吗? - CodePen

标记

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
  <md-button class="md-primary md-raised" ng-click="vm.openDialog($event)">
    Dialog
  </md-button>
</div>

JS

angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('MyController', function($scope, $mdDialog) {
  var vm = this;

  vm.testObject = {test: "blah"};

  vm.openDialog = function(ev) {
    $mdDialog.show({
      controller: 'DialogController',
      controllerAs: 'DialogCtrl',
      template: '<loader my-master="vm.testObject"></loader>',
      parent: angular.element(document.body),
      scope: $scope,
      preserveScope: true,
      targetEvent: ev,
      clickOutsideToClose:true
    });
  };
})

.controller('DialogController', function($scope, $mdDialog) {
})

.directive("loader", loader);

function loader() {
  return {
    template: "<div>Loader directive - {{vm.master.test}}</div>",
    controller: loaderController,
    controllerAs: 'vm',
    scope: {
      words: '=',
      master:'=myMaster'
    },
    replace: true,
    bindToController: true,
  };

  function loaderController ($scope) {
    console.log($scope.vm.master);
 }
}