Question

我为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>

我没弄错我的地方。

Answer 1

我得到的输出为 Output

代码如下：

<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>

Answer 2

首先将指令的名称更改为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>

这是输出-

我在此自定义指令代码中遇到问题

2 个答案: