有人知道为什么我的AngularJS指令不按预期显示吗？

Question

更新:请参阅的解决方案。有关这一问题的原因，请参见这是如此。

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

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

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