Почему эта директива в angularjs не принимает аргументы, несмотря на следующие уроки

0

У меня есть следующий код:

<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 регистрируется на консоли, и на странице ничего не отображается.

Кто-нибудь знает, где я ошибаюсь?

Часть меня чувствует, что это что-то очень простое, но я не могу понять, что это такое.

  • 0
    Да, это просто проблема в определении области, будь то привязка variable string или function . :)
  • 0
    "=" eval Bob to $ scope.Bob, который не определен .. вместо этого используйте "@".
Теги:

3 ответа

1
Лучший ответ

Потому что вам нужно изменить это

friend: '='

к этому

friend: '@'

'=' для переменных (привязка двухсторонних данных) и '@' для строк

Также с этим

friend: '='

вы можете это сделать

<calendar friend="'Bob'"></calendar>
0

Запустите следующий фрагмент, проверьте консоль.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>
0

Пытаться:

            scope:{
                friend: '@'
            },

= используется, когда вы привязываете переменную

Ещё вопросы

Сообщество Overcoder
Наверх
Меню