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

Question

更新：请参阅 Jim Schubert 的回答以获得修复。请参阅 This SO 了解为什么这很重要。

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

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

重复使用第一个示例只会显示页面上每次使用的最后一次使用。这允许空格、下划线等。
这允许在页面上重复使用，但不允许空格、下划线等
这允许重复使用和空格、下划线等。这个问题是我不希望每次使用该指令时对象都是相同的。 IE。我想从任何对象传入文本和值，文本可以是 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。

文档中缺少的绑定是 @，它将绑定到一个值。我已经更新了您的 fiddle 以使您的指令之一按您的预期工作。例如：

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 指令没有按预期显示？

Does anyone know why my AngularJS directives do not display as expected?

angularjs

angularjs-directive