I got a directive that looks like this:
我得到了一个看起来像这样的指令：
.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
return {
bindToController: true,
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) { ....
Implementation
履行
<navigation></navigation>
How do I add an object to the directive?
如何在指令中添加对象？
Since I will be using this in different places I would like to send an object into the directive so the directive will behave differently depending on the object.
由于我将在不同的地方使用它，我想将一个对象发送到指令中，因此指令将根据对象的不同而有所不同。
3 个解决方案
#1
1
If you use bindToController you should have a controller (together with controllerAs, also scope can still be used to define which kind of scope is created) for your directive, since this property is used to bind scope properties directly to the directive's controller.
如果使用bindToController，则应该有一个控制器（与controllerAs一起，还可以使用作用域来定义为哪个类创建作用域），因为此属性用于将作用域属性直接绑定到指令的控制器。
If you don't need a controller, then you can simply use scope bindings to pass the object to your directive.
如果您不需要控制器，那么您可以简单地使用范围绑定将对象传递给您的指令。
See both examples below:
请参阅以下两个示例：
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
$scope.test = {val: 10};
$timeout(function(){
$scope.test.val = 111;
}, 1000);
}])
.directive('navigation1', ['$rootScope', function ($rootScope) {
var navigationDirective1 = {
restrict: 'E',
scope: {},
bindToController: {
obj: '='
},
controllerAs: 'vm',
controller: function(){ var ctrl = this; ctrl.$onInit = function onInit(){ console.log(ctrl.obj); }; },
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) {
console.log(scope.obj); //returns undefined
}
}
return navigationDirective1;
}])
.directive('navigation2', ['$rootScope', function ($rootScope) {
var navigationDirective2 = {
restrict: 'E',
scope: {
obj: '<'
},
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) {
console.log(scope.obj);
}
}
return navigationDirective2;
}]);<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<navigation1 obj="test"></navigation1>
--
<navigation2 obj="test"></navigation2>
</div>
<script type="text/ng-template" id="navigation.tmpl.html">
<div ng-if="vm.obj">
Hello from directive's controller {{vm.obj}}
</div>
<div ng-if="obj">
Hello from directive's link {{obj}}
</div>
</script>
</div>#2
3
You can pass object from controller to directive without using bindToController: true inside the directive.
您可以将对象从控制器传递到指令，而无需在指令内使用bindToController：true。
Demo controller
演示控制器
app.controller('MainCtrl', function($scope) {
$scope.Obj={"fName":"John","lName":"Snow"};
});
Demo directive
演示指令
app.directive('dirDemo', function () {
return {
scope: {
param: '='
},
link: function (scope, element, attrs) {
alert(scope.param.fName);
alert(scope.param.lName);
}
}
});
HTML:
HTML：
<body ng-controller="MainCtrl">
<div dir-demo
param="Obj"
</div>
</body>
Plunker demo https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview
Plunker演示https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview
If you still want to use bindToController then you need to mention controller name inside directive as below
如果你仍然想使用bindToController，那么你需要在指令中提到控制器名称，如下所示
Demo directive
演示指令
app.directive('dirDemo', function () {
return {
scope: {
param: '='
},
bindToController: true,
controller: 'MainCtrl',
controllerAs: 'ctrl',
link: function (scope, element, attrs) {
alert(scope.ctrl.param.fName);
alert(scope.Obj.lName);
}
}
});
Plunker demo https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview
Plunker演示https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview
#3
1
You can pass it via scope:
你可以通过范围传递它：
.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
return {
scope: {
objParam: '='
},
bindToController: true,
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) { ....
Then your directive becomes:
然后你的指令变成：
<navigation obj-param="some.object"></navigation>
An alternative version:
另一种版本：
.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
return {
bindToController: {
objParam: '='
},
scope: true,
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) { ....
#1
1
If you use bindToController you should have a controller (together with controllerAs, also scope can still be used to define which kind of scope is created) for your directive, since this property is used to bind scope properties directly to the directive's controller.
如果使用bindToController，则应该有一个控制器（与controllerAs一起，还可以使用作用域来定义为哪个类创建作用域），因为此属性用于将作用域属性直接绑定到指令的控制器。
If you don't need a controller, then you can simply use scope bindings to pass the object to your directive.
如果您不需要控制器，那么您可以简单地使用范围绑定将对象传递给您的指令。
See both examples below:
请参阅以下两个示例：
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
$scope.test = {val: 10};
$timeout(function(){
$scope.test.val = 111;
}, 1000);
}])
.directive('navigation1', ['$rootScope', function ($rootScope) {
var navigationDirective1 = {
restrict: 'E',
scope: {},
bindToController: {
obj: '='
},
controllerAs: 'vm',
controller: function(){ var ctrl = this; ctrl.$onInit = function onInit(){ console.log(ctrl.obj); }; },
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) {
console.log(scope.obj); //returns undefined
}
}
return navigationDirective1;
}])
.directive('navigation2', ['$rootScope', function ($rootScope) {
var navigationDirective2 = {
restrict: 'E',
scope: {
obj: '<'
},
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) {
console.log(scope.obj);
}
}
return navigationDirective2;
}]);<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<navigation1 obj="test"></navigation1>
--
<navigation2 obj="test"></navigation2>
</div>
<script type="text/ng-template" id="navigation.tmpl.html">
<div ng-if="vm.obj">
Hello from directive's controller {{vm.obj}}
</div>
<div ng-if="obj">
Hello from directive's link {{obj}}
</div>
</script>
</div>#2
3
You can pass object from controller to directive without using bindToController: true inside the directive.
您可以将对象从控制器传递到指令，而无需在指令内使用bindToController：true。
Demo controller
演示控制器
app.controller('MainCtrl', function($scope) {
$scope.Obj={"fName":"John","lName":"Snow"};
});
Demo directive
演示指令
app.directive('dirDemo', function () {
return {
scope: {
param: '='
},
link: function (scope, element, attrs) {
alert(scope.param.fName);
alert(scope.param.lName);
}
}
});
HTML:
HTML：
<body ng-controller="MainCtrl">
<div dir-demo
param="Obj"
</div>
</body>
Plunker demo https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview
Plunker演示https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview
If you still want to use bindToController then you need to mention controller name inside directive as below
如果你仍然想使用bindToController，那么你需要在指令中提到控制器名称，如下所示
Demo directive
演示指令
app.directive('dirDemo', function () {
return {
scope: {
param: '='
},
bindToController: true,
controller: 'MainCtrl',
controllerAs: 'ctrl',
link: function (scope, element, attrs) {
alert(scope.ctrl.param.fName);
alert(scope.Obj.lName);
}
}
});
Plunker demo https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview
Plunker演示https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview
#3
1
You can pass it via scope:
你可以通过范围传递它：
.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
return {
scope: {
objParam: '='
},
bindToController: true,
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) { ....
Then your directive becomes:
然后你的指令变成：
<navigation obj-param="some.object"></navigation>
An alternative version:
另一种版本：
.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
return {
bindToController: {
objParam: '='
},
scope: true,
templateUrl: 'navigation.tmpl.html',
link: function (scope , element , attrs) { ....