Fatal编程技术网
  • javascript/
  • Javascript 在嵌套指令场景中从内部指令（内部模板）传递属性

Javascript 在嵌套指令场景中从内部指令（内部模板）传递属性

javascript angularjs

Javascript 在嵌套指令场景中从内部指令（内部模板）传递属性,javascript,angularjs,Javascript,Angularjs,请参考以下代码段： 工作正常，我做了以下更改： HTML <!DOCTYPE html> <html ng-app="MultiplicationApp"> <head> <link rel="stylesheet" href="multiplication-app.css"> </head> <body ng-init="data='x'"> <div multiplication-tab

请参考以下代码段：

工作正常，我做了以下更改：

HTML

<!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>


{{multiply.value}}
乘法应用程序.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);
    }
  };
}]);

var ngModule=angular.module（'MultiplicationApp'，[]）
指令（'multiplicationTable'，[function（）{
返回{
templateUrl:“乘法表tpl.html”，
controllerAs:'ctrl'，
是的，
bindToController：对，
范围：{
x:“=”，
y:“=”
},
控制器：函数（）{
var x=这个.x | | 0；
var y=this.y | | 0；
var table=this.rows=[]；

对于（var i=0；i基本上，为
乘法
制作一个模板，该模板保存我们要转包的值


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);
}
}]);


为了访问multiply value，您需要将value传递给它自己的模板，所以我已经为child'multiply.tpl.html'创建了模板，您需要的是实现

.tpl.html


{{ multiplication.value }}


找到你的答案：

我希望这个解释能消除你的疑虑


谢谢和干杯！
谢谢，但这并没有回答我的问题。我想知道为什么第二个弹跳器不工作。第一个弹跳器已经按照我说的那样工作了。我只想使用第二个弹跳器的控制器使其工作。我还想知道为什么第二个弹跳器不像第一个弹跳器那样工作。在角度世界中，我们是不从子级/父级传递相同的值。我们可以从子级传递值，也可以从父级使用值。但是在
乘法表
中，我们通过绑定到控制器的作用域访问属性
x
和
y
。为什么我不能在
乘法单元格
指令中使用相同的方法？是的工作！！谢谢，但它会向控制台抛出一个错误：
angular.js:8525错误：[ngTransclude:orphan]在模板中非法使用ngTransclude指令！未找到需要转换的父指令。元素：http://errors.angularjs.org/1.3.6/ngTransclude/orphan?p0=%3Cdiv%20multiplication-单元格%3D%22%22%20x%3D%22%24index%2B1%22%20y%3D%22%24parent.NaNndex%2B1%22%20ng转包%3D%22%22%class%3D%22ng绑定%20ng隔离范围%22%3E之前没有看到错误。感谢您注意到它并删除了此插件中的错误：您能接受答案吗？谢谢

{{ multiplication.value }}