Я создал эту директиву
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!
Не знаю, почему это происходит.
Вам нужно изменить 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="/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="/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
<sig-panel img-data="test"></sig-panel>
{{ test }}
</div>
Error: [$compile:nonassign] Expression ''test'' used with directive 'signaturePanel' is non-assignable!