Question

更新：请参阅Jim Schubert的答案。请参阅This SO了解其重要性。

我有三种方法在AngularJS指令中显示动态文本，它们都给了我不同的问题。我想通过将在我的模板中显示的属性传入一个值。我的模板实际上是一个文件，但我将this simplified JSFiddle转换为使用模板显示我的问题。

您可以在下面的代码中或在JSFiddle中看到我有3个示例。

重复使用第一个示例将仅显示页面上每次使用的最后一次使用。这允许空格，下划线等。
这允许在页面上重复使用，但不允许使用空格，下划线等。
这允许重复使用和空格，下划线等。这个问题是我不希望对象在每次使用指令时都是相同的。 I.E.我想传递来自任何对象的文本和值，文本可以是text = {{ruhOh}}或text = {{iLikePeanutButter}}。我可以映射它，但这是额外的开销。

我的期望 允许在每个指令上重复使用带有动态文本和不同文本的指令。允许下划线，空格等。

<div ng-controller="MyCtrl">
    <!--Always displays the last use for every use-->
    <ntt-form-text text="OperationsA" value="3"></ntt-form-text>
    <ntt-form-text text="OperationsB" value="3"></ntt-form-text>

    <!--three will display here-->
    <ntt-form-text-three text="Operations" value="5" obj="obj"></ntt-form-text-three>

    <!--spaces, underscores, dashes, ect cause display errors, tried both single and double quotes-->
    <ntt-form-text-two text="Operations A" value="5"></ntt-form-text-two> <!-- displays {{text}} -->
    <!--<ntt-form-text-two text="Description_2" value="5"></ntt-form-text-two>--> <!-- displays blank -->
    <!--<ntt-form-text-two text="ASDF-2" value="5"></ntt-form-text-two>--> <!-- displays -2 -->

    <!--three will fail to display here due to failure in two-->
    <ntt-form-text-three text="description" value="6" obj="obj"></ntt-form-text-three>
</div>

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

myApp.directive('nttFormText', [
    function () {
        return {
            restrict: 'E',
            //scope: false,
            template: '<div>Text: {{text}}</div>',
            link: function (scope, element, attrs) {
                scope.text = attrs.text;
                scope.value = attrs.value;
            }
        };
    }])

myApp.directive('nttFormTextTwo', [
    function () {
        return {
            restrict: 'E',
            scope: { text: '=', value: '=' },
            template: '<div>Text: {{text}}</div>'
        };
    }])

myApp.directive('nttFormTextThree', [
    function () {
        return {
            restrict: 'E',
            scope: { text: '=', value: '=', obj: '=' },
            template: '<div>Text: {{text}} Value: {{value}} Spaced Word: {{obj.spacedWord}}</div>'
        };
    }])

myApp.controller('MyCtrl', function ($scope) {
    $scope.obj = { spacedWord: "hello world!" };
});

Answer 1

http://jsfiddle.net/gh9qwo1L/7/

我认为您遇到的问题是使用范围绑定。来自https://docs.angularjs.org/guide/directive：

要绑定到<div bind-to-this="thing">中的属性，您需要指定=bindToThis
如果希望指令公开API以绑定行为，请在范围选项中使用&attr。

文档中缺少的绑定是@，它将绑定到一个值。我已经更新了你的小提琴，让你的一个指令按照你的期望工作。例如：

myApp.directive('nttFormTextThree', [
    function () {
        return {
            restrict: 'E',
            // NOTE: '=' means two way binding, '@' means bind to a value.
            scope: { text: '@', value: '=', obj: '=' },
            template: '<div>Text: {{text}} Value: {{value}} Spaced Word: {{obj.spacedWord}}</div>'
        };
    }])

   // usage
   <ntt-form-text-three text="Operations" value="5" obj="obj"></ntt-form-text-three>

@允许您绑定要显示为文本的文本。

以下是您使用它的方式（text: '='）：

myApp.directive('nttFormTextThreeEx', [
    function () {
        return {
            restrict: 'E',
            scope: { text: '=', value: '=', obj: '=' },
            template: '<div>Text: {{text}} Value: {{value}} Spaced Word: {{obj.spacedWord}}</div>'
        };
    }])

// in your parent scope:
$scope.operations = 'Operations on scope';

// template usage bound to scope
<ntt-form-text-three-ex text="operations" value="5" obj="obj"></ntt-form-text-three-ex>

// template usage bound to text
<ntt-form-text-three-ex text="'Wrapped in quotes'" value="5" obj="obj"></ntt-form-text-three-ex>

有谁知道为什么我的AngularJS指令没有按预期显示？

1 个答案: