Не удается получить значение изолированного объема в директиве

Question

Не удается получить значение изолированного объема в директиве

0

Я создал эту директиву

angular.module('panel')
            .directive('sigPanel', sigPanel)

    function sigPanel() {
        return {
            restrict: 'E',
            scope:{
                imgData:"="
            },
            templateUrl: 'app/widgets/signature/signature.html',
            link: function (scope, element, attrs) {
                console.log(scope.imgData);
            }
        }
    }

Это шаблонURL:

<canvas style="border:1px solid black;"></canvas>

И добавил это в HTML:

<sig-panel imgData="test"></sig-panel>

Консольный журнал выводит только "undefined", не должен ли он записывать "тест"? Я знаю, что тег директивы html работает правильно, потому что на странице появляется холст, но почему директива не примет значение "imgData"?

Если я попытаюсь установить scope.imgData внутри директивы, я получу ошибку

[$compile:nonassign] Expression 'undefined' used with directive 'signaturePanel' is non-assignable!

Не знаю, почему это происходит.

Ethan 06 июль 2015, в 22:00

Источник

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

DTing · Accepted Answer · 2015-07-06T17-47-00.000Z

Вам нужно изменить imgData (нормализированный camelCase) на img-data (разделение тире). Кроме того, если вы хотите передать строку "test" в область, в которой вам нужно поставить кавычки вокруг нее.

angular.module('app', []).directive('sigPanel', sigPanel);

function sigPanel() {
  return {
    restrict: 'E',
    scope: {
      imgData: "="
    },
    template: '<canvas style="border:1px solid black;"></canvas>',
    link: function(scope, element, attrs) {
      console.log(scope.imgData);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>

  <sig-panel img-data="'test'"></sig-panel>

</div>

назначаемый пример:

angular.module('app', [])
.controller('myController', function($scope) {
  $scope.test = 'test';
})
.directive('sigPanel', sigPanel);

function sigPanel() {
  return {
    restrict: 'E',
    scope: {
      imgData: "="
    },
    template: '<canvas style="border:1px solid black;"></canvas>',
    link: function(scope, element, attrs) {
      console.log(scope.imgData);
      scope.imgData = 'bob';
      console.log(scope.imgData);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <sig-panel img-data="test"></sig-panel>
  {{ test }}
</div>

Это устраняет проблему, когда console.log не работает. Но теперь, когда я пытаюсь изменить область видимости на что-то другое, я получаю ошибку Error: [$compile:nonassign] Expression ''test'' used with directive 'signaturePanel' is non-assignable!
«Эта ошибка возникает, когда директива определяет свойство изолированной области (используя режим = в параметре области действия определения директивы), но директива используется с выражением, которое нельзя назначить». Строка «test» не присваивается. Если вы используете переменную, вы не увидите эту ошибку. Не намного больше я могу представить без большего контекста того, что вы пытаетесь сделать.