2016-06-29 2 views
1

Я новичок в угловых. Я прочитал много блогов относительно разницы между @/= для выделенной области действия, но все же я запутался. Вот небольшой пример, который я попробовал.Почему выделенная область (=) не работает со строками?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <title>Directive Test</title> 
 
    
 
    <script type="text/javascript"> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('MyCtrl', ['$scope', function ($scope) { 
 

 
    }]); 
 
    app.directive('personInfo', [function() { 
 
     return { 
 
     restrict: 'EA', 
 
     scope: { 
 
      name: '=', 
 
      age: '=' 
 
     }, 
 
     template: "My name is {{name}} . My age is {{age}}", 
 
     link: function (scope, iElement, iAttrs) { 
 
      console.log(scope.name); 
 
     } 
 
     }; 
 
    }]) 
 
    </script> 
 
</head> 
 
<body ng-controller="MyCtrl"> 
 
    <person-info name="deepak" age="25"></person-info> 
 
</body> 
 
</html>

Выход:

My name is . My age is 25

Я не получаю, почему имя undefined, где, как возраст приходит в 25. Когда я делаю name: @, все работает снова штраф.

Я не уверен, почему = работает с числовым значением, но не с strings.I знаю @ используется для односторонней и = используется для двусторонней привязки, но в моем примере я не имею ничего общего с родительской области.

ответ

4

= является двунаправленным связыванием, поэтому, когда вы используете строку, она думает, что вы пытаетесь передать переменную области с именем deepak. Чтобы передать строки, вы должны обернуть их в кавычки name="'deepak'".

Числа причин работают потому, что переменные не могут начинаться с цифр, поэтому вместо этого они интерпретируются как значение.

Если вы используете @, это будет однонаправленное связывание, которое нельзя передать переменным области видимости. Это позволит вам пропускать значения, поэтому name="deepak" и name="{{somevar}}" будут работать.

1

Если вы используете =, директива ожидает переменную области видимости по выражению.

Итак, <person-info name="deepak"> Вы говорите угловое для поиска $scope.deepak, что равно null в этом случае, таким образом, результат.

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

Для использования символьной строки при использовании =, вам нужно добавить дополнительный слой котировок <person-info name="'deepak'">

Смежные вопросы