Question

我在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>

最后，有指令（可能有效也可能无效）：

  .directive('SampleQuilt', ['imgPath','text',function(imgPath, text) {
        return {
            restrict: 'E',
            templateUrl: 'partials/sample_quilt.html'
            };
  }])

所以我显然有点过头了。我已经阅读了大量的文档和一些例子，但似乎没有一个我正在做的事情。或者也许我还没有内化到足以让它坚持下去。

我不是在寻找一个完整的解决方案;我不介意通过它。但是我被困住了 - 我不知道如何让imgPath和text走向可以使用它们的部分地方。

此外，Directives还有嵌入式控制器。部分如何知道参考这个控制器？为什么它甚至可以访问它，因为它被隐藏在指令中？

感谢你朝着正确的方向开机。

编辑 -

感谢@Dalorzo我似乎有一个解决方案。

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

其次，我将指令命名为“SampleQuilt”。这不起作用 - 该指令没有做任何/无法找到。但是，当我将其重命名为sampleQuilt时，内部名称转换有效。出于类似原因，HTML必须引用img-path，而不是imgPath。

现在有三个文件。

index.html代码段：

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

部分：

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

指令：

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

编辑2 -

以上不起作用 - 我被浏览器缓存烧毁了。

好像index.html中的这个片段好奇......

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

img-path属性显然可以拼写为三种不同的方式：img-path，'imgPath'和img_path。所有内容都在内部转换为imgPath。在部分中显示值时，imgPath是正确的。

以下是更正的部分：

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

Answer 1

根据您上面的示例，我认为这应该是您的意图：

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

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

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

@ 从DOM中捕获属性值作为字符串值。
= 将该属性评估为父作用域的属性。
& 将该属性评估为父作用域的方法。

您可以在此处详细了解：

http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

关于 html ：

删除 ng ，不要将它作为指令的一部分使用，它们由有角度的团队保留，最好避免它们以避免冲突。您可以阅读有关Angular Naming Conventions here
案例（驼峰案例或pascal案例）意味着在角度指令中划线，因此{h}中SampleQuilt需要用作sample-quilt。

样品：

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

关于指令控制器的最后一个问题。指令返回的对象具有controller属性，您可以使用它：

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

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

1 个答案: