在嵌套指令场景中从内部指令传递属性(内部模板)
在嵌套指令场景中从内部指令传递属性(内部模板)
提问于 2016-07-06 21:12:26
引用以下代码片段：
柱塞演示1运行良好，我做了以下更改：
<!DOCTYPE html>
<html ng-app="MultiplicationApp">
<head>
<link rel="stylesheet" href="multiplication-app.css">
</head>
<body ng-init="data='x'">
<div multiplication-table x="5" y="5">
{{ multiplication.value }}
</div>
<script type="text/javascript" src="//code.angularjs.org/1.3.6/angular.js"></script>
<script src="multiplication-app.js"></script>
</body>
</html>multiplication-app.js
var ngModule = angular.module('MultiplicationApp', [])
ngModule.directive('multiplicationTable', [function() {
return {
templateUrl : 'multiplication-table-tpl.html',
controllerAs : 'ctrl',
transclude: true,
bindToController: true,
scope: {
x : '=',
y : '='
},
controller : function() {
var x = this.x || 0;
var y = this.y || 0;
var table = this.rows = [];
for(var i=0;i<y;i++) {
var array = table[i] = [];
for(var j=0;j<x;j++) {
array.push(1);
}
}
}
}
}]);
ngModule.directive('multiplicationCell', [function() {
return {
controllerAs : 'multiplication',
bindToController: true,
scope: {
x : '=',
y : '='
},
controller : function() {
var x = this.x || 0; //why does this does not resolve the x="$index+1" attribute in the directive.
var y = this.y || 0; //why does this does not resolve the y="$parent.$index+1" attribute in the directive.
this.value = x * y;
// console.log(this);
}
};
}]);multiplication-table.tpl.html
<div ng-repeat="row in ctrl.rows track by $index">
<div ng-repeat="cell in row track by $index">
<div multiplication-cell
x="$index+1"
y="$parent.$index+1"
ng-transclude>
</div>
</div>
</div>我无法理解为什么不能从内部嵌套标记内的multiplication.value控制器访问multiplication。
我创造了这个按钮来证明这一点。
柱塞演示2
我正在寻找以下问题的答案：
- 为什么第二普伦克没有按预期工作？
- 如何使用最小的更改使第二个模块工作。这个解决方案不应该与第一个柱塞相同。
注意：-- multiplicationCell实现类似于multiplicationTable，但仍然无法工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-07 02:28:03
基本上，为包含我们正在转换的值的multiplication创建一个模板。
controllerAs : 'multiplication',
templateUrl: 'multiplication.tpl.html',
bindToController: true,
scope: {
x : '=',
y : '='
},
controller : function() {
var x = this.x || 0;
var y = this.y || 0;
this.value = x * y;
// console.log(this);
}
}]);为了访问乘法值，您需要将值传递给它自己的模板，因此我已经为子“multiplication.tpl.html”创建了模板，您需要的是实现。
multiplication.tpl.html
{{ multiplication.value }}找到你答案的柱塞：http://plnkr.co/edit/glssXrvbVpP2UjDgu3Ed?p=preview
我希望这个解释能澄清你的疑虑。
谢谢！干杯！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38233849
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号