Angular.js 将参数传递给指令 [英] Angular.js passing parameter to directive
问题描述
我是 Angular 的新手,所以如果这个问题的答案非常基本,请不要感到惊讶.
我正在尝试将地图封装在指令中,该地图将具有一些自定义行为:我希望它与服务通信以检索与商家相关的所有点.>
所以我想将 merchant 作为参数传递给指令:
这是 HTML:
<div ng-controller="Ctrl1"><p>Ctrl 1: {{merchant1}}</p><map MerchantDetails="{{merchant1}}"></map>
这是javascript:
var myApp = angular.module('myApp', []);myApp.controller('Ctrl1', function ($scope) {$scope.merchant1 = "foo"});myApp.controller('Ctrl2', function ($scope) {$scope.merchant2 = "bar"}).directive('map', function () {返回 {限制:'E',链接:函数(范围、元素、属性、控制器){scope.merchant2 = attrs.merchantDetails;},范围: {商户详情:"@"},模板:'Ctrl2:{{merchant2}}'}});
问题是模板中的 scope.merchant2
永远不会更新.我希望它有foo",或者最坏的bar",而不是空白.
当我在 Chrome 中调试时,控制器 Ctrl2
初始化永远不会执行.为什么?我希望它在链接阶段之前完成.
如何将foo"值传递给 Ctrl2
?
jsfiddle 在这里可用.
您实际上不需要第二个控制器.我更新了提琴手,请检查它是否是您需要的:
https://jsfiddle.net/e7cfcakv/7/
<div ng-controller="Ctrl1"><p>Ctrl 1: {{merchant1}}</p><map Merchant-details="{{merchant1}}"></map>
var myApp = angular.module('myApp', []);myApp.controller('Ctrl1', function ($scope) {$scope.merchant1 = "foo"});myApp.directive('map', function () {返回 {限制:'E',链接:函数(范围、元素、属性、控制器){scope.merchant2 = scope.merchantDetails;},范围: {商户详情:"@"},模板:'Ctrl2:{{merchant2}}'}});
I'm a newbie at Angular, so don't be surprise if the answer to this question is pretty basic.
I'm trying to encapsulate a map in a directive, the map will have some custom behavior: I want it to communicate with a Service to retrieve all the points related to a merchant.
So I want to pass the merchant as a parameter to the directive:
This is the HTML:
<div ng-app="myApp">
<div ng-controller="Ctrl1">
<p>Ctrl 1: {{merchant1}}</p>
<map merchantDetails="{{merchant1}}"></map>
</div>
</div>
This is the javascript:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl1', function ($scope) {
$scope.merchant1 = "foo"
});
myApp.controller('Ctrl2', function ($scope) {
$scope.merchant2 = "bar"
})
.directive('map', function () {
return {
restrict: 'E',
link: function (scope, element, attrs, controller) {
scope.merchant2 = attrs.merchantDetails;
},
scope: {
merchantDetails: "@"
},
template: 'Ctrl2: {{merchant2}}'
}
});
The problem is that scope.merchant2
at the template never gets updated.
I would like it to have "foo", or at worst "bar", not blank.
When I debug this in Chrome, controller Ctrl2
initialization is never executed. Why? I would expect it to be done before the link phase.
How do I do to get the "foo" value passed to Ctrl2
?
The jsfiddle is available here.
You actually don't need the second controller. I update the fiddler, please check if it's what you need:
https://jsfiddle.net/e7cfcakv/7/
<div ng-app="myApp">
<div ng-controller="Ctrl1">
<p>Ctrl 1: {{merchant1}}</p>
<map merchant-details="{{merchant1}}"></map>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl1', function ($scope) {
$scope.merchant1 = "foo"
});
myApp.directive('map', function () {
return {
restrict: 'E',
link: function (scope, element, attrs, controller) {
scope.merchant2 = scope.merchantDetails;
},
scope: {
merchantDetails: "@"
},
template: 'Ctrl2: {{merchant2}}'
}
});
这篇关于Angular.js 将参数传递给指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!