Директивы Angularjs изолированная область + односторонняя привязка данных не работает для объектов?

Я создал пользовательскую директиву, которая имеет два значения. сначала - объект конфигурации, а второй - объект данных. Я изменяю эту конфигурацию и объекты данных внутри своей директивы, которая отражает ее в родительской области. Что вызывает у меня ошибку, когда я должен использовать директиву несколько раз.

Я следил за https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/, и я использую изолированную область.

Я хочу, чтобы односторонняя привязка данных к объектам в изолированной области. Независимо от того, что я изменяю в директивной функции, он не должен отражаться в родительской области.

ниже - область действия директивы.

scope: {
    config: "&config",
    dataObj: "&dataObj"
}

вот как я обращаюсь к нему в функции ссылки директивы

var config = scope.config();
var dataObj= scope.dataObj();

Я предполагаю, что здесь происходит передача по ссылке.

Я добавляю JSbin. проверьте консоль, значение объекта меняется и отражается в родительской области.

https://jsbin.com/vagowe/edit?html,js,output

Ответ 1

передаваемый текст one-way binding(@) и передаваемый объект two-way binding(=)

передача объекта в виде текста

<custom-directive config="{{config}}"></custom-directive>

сфера действия в директиве

scope: {
  config: "@"
}

преобразование строки обратно в объект в ссылке

var config = angular.fromJson(scope.config);

Ответ 2

Вы правы, проблема в том, что ваши объекты JavaScript передаются по ссылке. Использование односторонней привязки копирует ссылку, но ссылка все равно будет указывать на тот же объект.

Мое впечатление от angular документов для директив всегда было:

Привязка '@' предназначена для интерполированных строк
Привязка '=' предназначена для структурированных данных, которые должны быть разделены между областями
& Amp; связывание предназначено для многократного выполнения выражения, связанного с родительской областью

Если вы хотите обрабатывать связанный объект из родительского объекта как неизменяемый, вы можете создать глубокую копию объектов внутри кода ссылки, используя angular.copy:

var config = angular.copy(scope.config());
var dataObj = angular.copy(scope.dataObj());

В качестве альтернативы вы можете использовать для этого двустороннюю привязку и копировать объект таким же образом:

scope: {
    config: "=",
    dataObj: "="
}

// ...
// Inside the link function of the directive.
// Note that scope.config and scope.dataObj are no longer functions!

var config = angular.copy(scope.config);
var dataObj = angular.copy(scope.dataObj);

Ответ 3

Проще всего было бы использовать приведенное ниже утверждение внутри директивы /component-

scope.config = angular.copy(scope.config);