2

好的，目前正在学习角度指令，但遇到了一个问题。

我有一个指令，其中在链接函数中创建了一个函数，该函数链接到在模板函数上作为 html 元素中的属性调用的范围。它也被称为在 html 标记之间。两个标签都没有更新。我怀疑它还没有编译或什么的。但是，我无法理解文档，因为它似乎一次谈论太多事情并且没有多大意义。或者他们遗漏了一些关键信息。

下面的任何一种方式都是我的代码的快照。

{{labelText()}} 不更新/插值。任何有关解决方案的帮助都会很棒！

var app = angular.module('mmApp', []);
app.directive('mmField', function(){

    return {
        'restrict': 'E',
        'priority': 5,
        'replace': true,
        'scope': {
            'path': '@',
            'label': '@',
            'type': '@',
            'editable': '@'
        },
        'template': '<div class="mm-field">' +
            '<label for="{{inputId()}}" ng-show="labelText()">{{labelText()}}</label> ' +
            '</div>',

        'link': function (scope, element, attrs) {
            var query = null;
//this is where the labelText() function is defined
            scope.labelText = function () {
                var labelAttrValue = (scope.label || attrs['withLabel'] || '');
                // cater for custom labels specified via the label or with-label attribute
                if (labelAttrValue && labelAttrValue.toLowerCase() !== 'true' && labelAttrValue.toLowerCase() !== 'false') {
                    return (labelAttrValue || '') + ':';
                } else if (labelAttrValue.toLowerCase() !== 'false' && scope.field) {
                    return (scope.field['name'] || 'FIELD_NAME_NOT_DEFINED') + ':';
                } else if (labelAttrValue.toLowerCase() == 'false') {
                    return '';
                } else {
                    return 'Loading...';
                }
            };
        }
}
])

我的测试功能如下。使用 mocha 和 chai 测试套件。

describe('LabelText', function () {
            it('should compile and run the directive and interpolate labelText()', function () {
                var element = $($compile('<div id="#test">' +
                    '<mm-field with-label="MONKEY" editable="false" path="`enter something.name"></mm-field>' +
                    '</div>')($scope));
                $scope.$digest();
                expect(element.find('label').attr('ng-show')).to.not.equal(labelText()); //test fails and equals labelText()
            });
        });
4

1 回答 1

2

我认为这只是某处的语法问题。

我复制了您的代码并在本地运行它。我让它工作，但只有在修复了一些不匹配的大括号并删除了你放在那里的所有依赖注入之后，因为它们都没有在链接函数中使用。

directive('mmField', function () {
  return {
    'restrict': 'E',
    'priority': 5,
    'replace': true,
    'scope': {
      'path': '@',
      'label': '@'
    },
    'template': '<div class="mm-field">' +
    '<label for="{{inputId()}}" ng-class="labelClass()" ng-show="labelText()">{{labelText()}}</label> ' +
    '<span class="field-value" ng-class="spanClass()" ng-click="handleSpanClick($event)" ng-show="!error">{{displayValue}}  <span class="units" ng-show="getUnits()">{{getUnits()}}</span></span> ' +
    '</div>',
    'link': function (scope, element, attrs) {
      var query = null;

      scope.labelText = function () {
        var labelAttrValue = (scope.label || attrs['withLabel'] || '');

        if (scope.error) return scope.error;

        // cater for custom labels specified via the label or with-label attribute
        if (labelAttrValue && labelAttrValue.toLowerCase() !== 'true' && labelAttrValue.toLowerCase() !== 'false') {
          return (labelAttrValue || '') + ':';
        } else if (labelAttrValue.toLowerCase() !== 'false' && scope.field) {
          return (scope.field['name'] || 'FIELD_NAME_NOT_DEFINED') + ':';
        } else if (labelAttrValue.toLowerCase() == 'false') {
          return '';
        } else {
          return 'Loading...';
        }
      };
      scope.inputId = function () {
        return scope.path.replace(/[^a-z0-9]/gi, '_');
      };
    }
  }
});
于 2013-04-17T03:36:40.490 回答