Question

我试图建立一个自定义按钮＆＃39;使用以下代码的指令。但是有些地方出错了你可以帮我解决它。在这里我附上代码片段以获得清晰的图片。在此先感谢。

<html>

<head>
    <title>Custom Directives</title>
</head>

<body>
<h2>AngularJS</h2>

<div ng-app = "mainApp" ng-controller = "ButtonController">
    <myButton name="Sai"></myButton><br/>
    <myButton name="Bharat"></myButton>
</div>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.directive('myButton', function() {
        var directive = {};
        directive.restrict = 'E';
        directive.transclude = true;
        directive.template = "<button>{{myButton.name}}</button>";


        directive.scope = {
            myButton : "=name"
        }

        directive.compile = function(element, attributes) {
            element.css("border", "1px solid #cccccc");

            var linkFunction = function($scope, element, attributes) {
                element.html("<button> $scope.myButton.name </button>");
            }
            return linkFunction;
        }

        return directive;
    });

    mainApp.controller('ButtonController', function($scope) {
        $scope.Sai = {};
        $scope.Sai.name = "Sai";

        $scope.Bharat = {};
        $scope.Bharat.name = "Bharat";

    });

</script>

</body>
</html>

Answer 1

你在html中以错误的方式声明指令。

html名称应该是 snake-case ，就像这样

<my-button name="Bharat"></my-button>

的 JSFIDDLE

如何在角度js中实现自定义指令？

1 个答案: