Как получить доступ к объекту с помощью изолированной области без двусторонней привязки?

Question

Я хочу передать Идентификатор продукта в директиве, как так:

<widget product-id="product.id"></widget> 

Я предпочитаю не использовать фигурные скобки:

<widget product-id="{{product.id}}"></widget> 

, потому что это более многословным, и я хочу, чтобы соответствовать стилю Использование ng-модели.

Я хочу использовать область выделения, чтобы я не мог случайно изменить product.id внутри виджета.

Если я использую:

scope { 
    productId: '@' 
} 

Затем в шаблоне директивы: {{productId}} дает мне строку "product.id"

Если я использую:

scope { 
    productId: '&' 
} 

Я не вижу выхода в шаблоне директивы {{productId}}, и, как я понимаю, & предназначен для функций привязки, а не свойств.

Если я использую:

scope { 
    productId: '=' 
} 

я получить точное значение, которое я хочу (число), но не это двухстороннее связывание и уязвимы для изменения product.id в виджете?

Answer 1

Если вы хотите, чтобы избежать двойного curlys вы можете использовать $parse обрабатывать сам:

выражения JavaScript-подобные фрагменты кода, которые обычно помещается в привязки, такие как {{expression}}. Выражения обрабатываются службой разбора $.

Чтобы использовать в вашей директиве $parse, вам необходимо предоставить область действия (контекст) для синтаксического анализа. Поскольку вы используете изолированную область, значение product.id будет находиться в области родительской директивы, поэтому мы будем использовать scope.$parent.

Вот пример:

myApp.directive('widget', function ($parse) { 
    return { 
     restrict: "E", 
     scope: { 
      productId: '@' 
     }, 
     link: function(scope, element, attr) {   
       nvalue = $parse(scope.productId)(scope.$parent); 
       console.log("parse result",nvalue); 
     }   
    }; 
}); 

demo fiddle

Answer 2

Боюсь, что нет привязки, который соответствует вашим потребностям, вы можете попробовать это:

link:function(scope, element, attr){ 
      scope.productId = scope.$parent.$eval(attr.productid); 
} 

Но этот подход не рекомендуется

DEMO

Рекомендуемый подход использует @ и {{}} в вашем html

scope:{ 
    productId: '@' 
    } 

Вашего HTML:

<widget product-id="{{productId}}"></widget> 

DEMO