У меня есть следующий код:
<html ng-app="calApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("calApp", []);
app.controller('calController', function calController(){});
app.directive('calendar',function(){
return {
restrict: "E",
scope:{
friend: '='
},
template:"<h1>{{friend}}</h1>",
controller: function($scope){
console.log($scope.friend);
console.log("hi");
}
}
});
</script>
</head>
<body ng-controller="calController">
<calendar friend="Bob"></calendar>
</body>
</html>
Я ожидаю, что "Боб" (или что-то еще написанное вместо него) будет зарегистрирован на консоли и выделен жирным шрифтом на странице. Вместо этого undefined
регистрируется на консоли, и на странице ничего не отображается.
Кто-нибудь знает, где я ошибаюсь?
Часть меня чувствует, что это что-то очень простое, но я не могу понять, что это такое.
Потому что вам нужно изменить это
friend: '='
к этому
friend: '@'
'=' для переменных (привязка двухсторонних данных) и '@' для строк
Также с этим
friend: '='
вы можете это сделать
<calendar friend="'Bob'"></calendar>
Запустите следующий фрагмент, проверьте консоль.log.
var app = angular.module("calApp", []);
app.controller('calController', function calController(){});
app.directive('calendar',function(){
return {
restrict: "E",
scope:{
friend: '@'
},
template:"<h1>{{friend}}</h1>",
controller: function($scope){
console.log($scope.friend);
console.log("hi");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<body ng-controller="calController" ng-app="calApp">
<calendar friend="Bob"></calendar>
</body>
Пытаться:
scope:{
friend: '@'
},
=
используется, когда вы привязываете переменную
variable
string
илиfunction
. :)