为什么在指令标记内传递对象时我得到字符串
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);
}
}
我无法访问我在指令中传递给它的对象。
// 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);
}
}