Я столкнулся с проблемой в этом коде пользовательской директивы - PullRequest
Новая
       296

Я столкнулся с проблемой в этом коде пользовательской директивы

0 голосов
/ 03 апреля 2019

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

 <html>
   <head>
    <title>Directives</title>
     <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
     <script src="angular-1.7.6\angular.js"></script>
     <script src="angular-1.7.6\angular.min.js"></script>
     <script>
       var app=angular.module("arrayApp", [])
       app.controller("arrayCtrl", function ($scope) {
       $scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
       });
       app.directive('mycolor', function() {
       return {
       restrict: 'E',
       transclude: 'true',
       template: '<span ng-transclude></span>',
       link: function(scope, element, attr){
       element.append("<strong>"+attr.title+"</strong>");
      }
    };
 });
 </script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
    <div ng-repeat="c in colors">
        <my-c title="{{c}}">
            BASIC COLOR:
        </my-c>
    </div>
</div>
</body>
</html>

Я не понимаю, где я не прав.

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Сначала измените имя директивы на camelCase, это хорошее соглашение для именования директив.Таким образом, ваше имя директивы должно быть myColor.

Затем используйте директиву как - my-color.Ниже весь код - 

<html>
   <head>
    <title>Directives</title>
     <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
     <script>
       var app=angular.module("arrayApp", [])
       app.controller("arrayCtrl", function ($scope) {
       $scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
       });
       app.directive('myColor', function() {
       return {
       restrict: 'E',
       transclude: 'true',
       template: '<span ng-transclude></span>',
       link: function(scope, element, attr){
       element.append("<strong>"+attr.title+"</strong>");
      }
    };
 });
 </script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
    <div ng-repeat="c in colors">
        <my-color title="{{c}}">
            BASIC COLOR:
        </my-color>
    </div>
</div>
</body>
</html>

Это вывод - enter image description here

1 голос
/ 03 апреля 2019

Я получаю вывод как Вывод

Код следующий: 

<html>
   <head>
    <title>Directives</title>
     <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
     <script>
       var app=angular.module("arrayApp", [])
       app.controller("arrayCtrl", function ($scope) {
       $scope.colors = ["RED","GREEN","BLUE","YELLOW" ];
       });
       app.directive('mycolor', function() {
       return {
       restrict: 'E',
       transclude: 'true',
       template: '<span ng-transclude></span>',
       link: function(scope, element, attr){
       element.append("<strong>"+attr.title+"</strong>");
      }
    };
 });
 </script>
</head>
<body ng-app="arrayApp">
<div ng-controller="arrayCtrl">
    <div ng-repeat="c in colors">
        <mycolor title="{{c}}">
            BASIC COLOR:
        </mycolor>
    </div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...