Question

在下面的AngularJS代码中，为什么我不能使用<rating ... />或<rating ...></rating>等评级指令？阅读文档，它应该是可能的吗？

我已经尝试查看代码，看看它失败了，但我无法找到原因。它工作得很好，如

<div rating rating-value="ratings.current" max="ratings.max" on-rating-selected="getSelectedRating(rating)"></div>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script type="text/javascript">
    var starApp = angular.module('starApp', []);
    starApp.controller('starCtrl', ['$scope', function($scope) {
        $scope.rating = 0;
        $scope.ratings = {
            current: 5,
            max: 10
        };
        $scope.getSelectedRating = function(rating) {
            console.log(rating);
        }
    }]);


    starApp.directive('rating', function() {
        return { // directive definition object
            restrict: 'A', // directive will be used as an attribute
            template: '<ul class="rating">' + // directive expanded to template
                      '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
                      '\u2605' +
                      '</li>' +
                      '</ul>',
            scope: { // variables in scope of directive (passed in from HTML)
                ratingValue: '=', // expects an object from directive in HTML
                max: '=',
                onRatingSelected: '&'
            },
            link: function(scope, elem, attrs) {

                var updateStars = function() {
                    scope.stars = [];
                    for (var i = 0; i < scope.max; i++) {
                        scope.stars.push({
                            filled: i < scope.ratingValue // filled is a boolean
                        });
                    }
                };


                scope.toggle = function(index) {
                    scope.ratingValue = index + 1;
                    scope.onRatingSelected({
                        rating: index + 1
                    });
                };

                // $watch() detect changes in scope variables ('ratingValue')
                scope.$watch('ratingValue', function(oldValue, newValue) {
                    if (newValue) {
                        updateStars();
                    }
                });
            }
        }
    });
</script>
<link rel="stylesheet" href="rating.css"/>
</head>
<body ng-app="starApp">
    <div ng-controller="starCtrl"> 
        <rating rating-value="ratings.current" max="ratings.max" on-rating-selected="getSelectedRating(rating)"></rating>
    </div>
</body>
</html>

Answer 1

您的指令定义为“A”，表示属性。

(restrict: 'A', // directive will be used as an attribute)

你需要重新加入：'E'代表元素，或'AE'。

Answer 2

将您的限制属性更改为：

restrict: 'EA'

E 表示该指令可以是一个标签本身（<rating></rating>）

A 表示该指令可以是HTML标记的属性（<div rating></div>）

Answer 3

由于您使用restrict选项为A，因此您的指令仅限于属性，因此您不能对目录使用元素语法。使用E。

restrict: 'EA', //no need to worry for its order like 'AE' or 'EA'

restrict选项通常设置为：

'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name

这些限制可以根据需要合并：

'AEC' - matches either attribute or element or class name

有关详情：view documentation

还有指令类型comment，为此，我们可以使用M但很少使用它。

AngularJS：为什么我不使用我的指令而不在div元素中使用它？

3 个答案: