Угловая директива с размаху: @ не работает

Question

Вот моя директива код, который работает отлично:

.directive('myGrid',function(){ 
return { 
    restrict:'E', 
    scope:{ 
    info:'=info' 
    }, 
    templateUrl : '/directiveGrid.html' 
} 

})

Вот codepen demo

Но если изменить масштаб, как:

.directive('myGrid',function(){ 
    return { 
     restrict:'E', 
     scope:{ 
     info:'@info' 
     }, 
     templateUrl : '/directiveGrid.html' 
    } 
    }) 

Не работает. Вот второй demo

Answer 1

Проблема заключается в том, когда у вас есть использовать @ для изолята сферы связывания, он передает значение из атрибута директивы. В основном при передаче значения с использованием @ это stringify, что значение и до передачи его директивы. Таким образом, значение директивы не было в формате JSON, оно становится стрифицированным до достижения директивы (тип данных изменен на string).

Если вы делаете {{info}}, вы увидите результат (это ничего, кроме string). Он был преобразован в строковых Вот почему вы не можете увидеть нг-repear рабочий

Предпочтительный подход будет использовать =, что будет делать две вещи

1. двухстороннее связывание
2. Он сохраняет тип данных значения, когда значение переходит к директиве.

Answer 2

Вот некоторые пояснения:

@ связывает область видимости свойства оцененного значения атрибута DOM локального/директивы. Поскольку значения атрибутов всегда являются строками, вы всегда будете иметь строковое значение для этого свойства в области директивы при использовании @.

@ позволяет присвоить значение, определенному в атрибуте директивы, для области выделения.

= связывает локальное/директивное свойство scope с родительской областью видимости. Таким образом, с =, вы используете имя родительской модели/области видимости как значение атрибута DOM. Вы не можете использовать {{}} s с =.

= устанавливает двухстороннее связующее выражение между областью выделения директивы и родительской областью. Изменения в дочерней области и распространение на родителя и наоборот. Подумайте = как сочетание @ и &. Screencast на = здесь: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

Да, двунаправленное связывание (=) позволяет локальной/директиве сферы и родительские возможности для обмена данных. «Связывание выражений» позволяет директиве вызывать выражение (или функцию), определяемое атрибутом DOM, - и вы также можете передавать данные в качестве аргументов выражения или функции. Итак, если вам не нужно обмениваться данными с родителем, вы просто хотите вызвать функцию, определенную в родительской области, - вы можете использовать синтаксис &.

& Благодаря Приветствия