Question

我正在参加CodeAcademy的Angular课程，我显然不了解自定义指令的工作原理。他们的帮助论坛目前无法使用，否则我会在那里发布。我正在尝试创建一个新的角度指令。这就是我们的目标。我正在使用的设置指向外部（html）模板。我遇到的问题是当我将数据输入到本地指令范围中概述的属性时，页面上没有显示任何内容。我的指令定义如下......

==================================

app.directive('programListing', function () {
    return {
        restrict: 'E',
        scope: {
            show: '=listing'
        }
        templateUrl: 'js/directives/programListing.html'
    };
});

==================================

我对此的理解是我已经声明了一个名为'programListing'的新指令，当Angular做的时候，我可以在我的DOM Hierarchy中使用这个指令。由于已为此指令定义了本地作用域，因此我应该能够在此指令旁边使用“listing”属性将数据插入其中并从Controller中定义的对象中拉出。下面是我的视图控制器的布局。

==================================

app.controller('MainController', ['$scope', function ($scope) {
    $scope.program = {
        series: "Sherlock",
        series_img: "img/sherlock.jpg",
        genre: "Crime drama",
        season: 3,
        episode: "The Empty Hearse",
        description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
        datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
    }
}]);

==================================

这是我的指令所指向的外部HTML模板。

==================================

<div class="col-md-6">
-h1 class="series"-{{show.series}} -h2 class="episode"-{{show.episode}} -p class="description"-{{show.description}} -/div-

==================================

我希望有人可以提供一些有关我在这里缺少的信息。

自定义AngularJS指令

0 个答案: