Angularjs 在指令中，将函数参数传递给html模板

我在Angular的第2天，正在尝试创建一个指令。我的想法是，我有几个被子的图像显示，我不想重复相同的HTML。下面是一个

index.html

代码片段，显示了新指令的用法以及我在部分代码中需要的两个“参数”：

<ng-samplequilt imgPath="img/t_3x3_no_sashing/jpg"
                text="This is a 3x3 quilt without sashing.">
</ng-samplequilt>

<div>
    <img src="{{imgPath}}"/>
    <div>
        {{text}}
    </div>
</div>

<div>
    <img src="{{img-path}}"/>
    <div>
        {{text}}
    </div>
</div>

所以我显然有点不知所措。我已经阅读了大量的文档和一些例子，但并没有一个和我正在做的完全一样。或许我还没有足够的内化，让它坚持下去

我不是在寻找一个完整的解决方案；我不介意把它做完。但是我被卡住了-我不知道如何获得

imgPath

和

text

以到达可以使用它们的部分

此外，指令具有嵌入式控制器。部分用户如何知道引用此控制器？既然指令中有它，为什么它甚至可以访问它

谢谢你给我一只方向正确的靴子

编辑-

多亏了@Dalorzo，我似乎找到了解决办法

首先，他关于在指令中定义范围的想法奏效了

其次，我将指令命名为“SampleCutter”。这不起作用-指令没有执行/找不到。但是，当我将其重命名为

samplecoult

时，内部名称转换起了作用。出于类似的原因，HTML必须引用

img路径

，而不是

imgPath

这是三个文件

index.html代码段：

<sample-quilt img-path="img/t_3x3_no_sashing.jpg"
              text="This is a 3x3 quilt without sashing.">
</sample-quilt>

编辑2-

上述方法不起作用-我被浏览器缓存烧坏了

似乎

index.html

中的这个片段很奇怪

<sample-quilt img-path="img/t_3x3_no_sashing.jpg"
              text="This is a 3x3 quilt without sashing.">
</sample-quilt>

---

基于上述示例，我认为这应该是您的意图：

var app = angular.module('demo',[]);

app.directive('SampleQuilt', function() {
        return {
            restrict: 'E',
            scope:{ imgPath: "@", text: "@"  },
            templateUrl: 'partials/sample_quilt.html'
            };
  });

通过向指令中添加范围，我们创建了一个“隔离范围”。使用此方法，范围可以通过3种方式捕获属性：

@

将DOM中的属性值捕获为字符串值

=

将属性作为父作用域的属性进行计算

&

将属性作为父范围的方法进行计算

您可以在此处阅读更多信息：

关于您的html：

• 删除ng，不要将其用作指令的一部分。angular团队保留这些指令，最好避免这些指令，以避免冲突。你可以阅读更多关于
• Cases（camel case或pascal case）表示角度指令中的破折号，因此

  samplecoult

  需要在html中用作

  sample coult

样本：

<sample-quilt imgPath="img/t_3x3_no_sashing/jpg"
                text="This is a 3x3 quilt without sashing.">
</sample-quilt>

<div>
<img src="{{imgPath}}"/>
<div>
{{text}}
</div>
</div>

var app = angular.module('demo',[]);

app.directive('SampleQuilt', function() {
        return {
            restrict: 'E',
            scope:{ imgPath: "@", text: "@"  },
            templateUrl: 'partials/sample_quilt.html'
            };
  });

<sample-quilt imgPath="img/t_3x3_no_sashing/jpg"
                text="This is a 3x3 quilt without sashing.">
</sample-quilt>

 app.directive('SampleQuilt', function() {
        return {
            restrict: 'E',
            controller: 'myDirController', /* <--- Controller Declaration */
            scope:{ imgPath: "@", text: "@"  },
            templateUrl: 'partials/sample_quilt.html'
            };
  });



app.controller('myDirController', ['$scope', function ($scope) {
    // My Directive Controller implementation      
}]);