Question

我尝试制作我的第一个指令，并使用此页面开始：https://docs.angularjs.org/guide/directive

该指令似乎已加载，但它应在我的视图中创建的元素未显示。

我的app.module.js

// script.js

// create the module and name it mainApp
    // also include ngRoute for all our routing needs
var mainApp = angular.module('mainApp', ['ngRoute', 'chart.js']);

// configure our routes
mainApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/first', {
            templateUrl : 'views/firstView.html',
            controller  : 'firstController'
        })

        // route for the home page
        .when('/second', {
            templateUrl : 'views/secondView.html',
            controller  : 'secondController'
        })

        // route for the about page
        .when('/third', {
            templateUrl : 'views/thirdView.html',
            controller  : 'thirdController'
        })

        // route for the contact page
        .when('/fourth', {
            templateUrl : 'views/fourthView.html',
            controller  : 'fourthController'
        })

        .otherwise({
            redirectTo: '/first'
        });
});

secondController

mainApp.controller('secondController', function ($scope) {
    // create a message to display in our view
    $scope.bericht = '2-Everyone come and see how good I look!';
})
.directive('testDirective', ['', function(){
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        //restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
        template: 'tralalala'
    };
}]);

第二个视图

<h1>{{ bericht }}</h1>
<hr>
<div ng-controller="secondController">
    <div testDirective></div> 
</div>

我希望<div testDirective></div>显示为tralalala，但它根本不显示，控制台也没有错误。

Answer 1

你的语法混淆了：

注册为testDirective的指令将在html中查找test-directive。

尝试：

<div test-directive></div>

OR

<test-directive></test-directive>

视图中未显示指令模板

1 个答案: