Question

我无法弄清楚导致我div中没有显示任何内容的错误。

HomeController.js（Controller）：

app.controller('HomeController', ['$scope', function($scope) {
    $scope.icons = [
        ...
    ];

    $scope.works = [
        {
            title: 'An Artsy Title for an Artsy Image',
            img: 'img/an-artsy-image.png',
            orientation: 'portrait',
            description: "A artsy description here."
        }
    ];
}]);

index.html（主页）：

<!DOCTYPE HTML>
<html ng-app="portfolio">
    <head>
        ...
        <!-- AngularJS Controller -->
        <script src="js/controllers/HomeController.js" type="text/javascript"></script>

        <!-- AngularJS Directive -->
        <script src="js/directives/introIcon.js" type="text/javascript"></script>
        <script src="js/directives/workExpo.js" type="text/javascript"></script>

        ...
    </head>
    <body ng-controller="HomeController">
        <div class="container-fluid hero">
            ...
        </div>
        <div class="container-fluid work-wrapper">
            <div class="container work-container">
                <div ng-repeat="work in works">
                    <work-expo info="work"></work-expo>
                </div>
            </div>
        </div>
    </body>
</html>

workExpo.js（指令）：

app.directive("workExpo", function() {
    return {
        restrict: 'E',
        scope: 'info',
        templateUrl: 'views/directives/workExpo.html'
    };
});

workExpo.html（指令模板）：

<div class="row" ng-if="info.orientation === 'landscape'">
    <div class="col-lg-12">
        <img ng-src="{{ info.img }}" class="img-responsive center-block" />
    </div>
    <div class="col-lg-12">
        <h3>{{ info.title }}</h3>
        <p>{{ info.description }}</p>
    </div>
</div>

<div class="row" ng-if="info.orientation === 'portrait'">
    <div class="col-sm-6">
        <img ng-src="{{ info.img }}" class="img-responsive center-block" />
    </div>
    <div class="col-sm-6">
        <h3>{{ info.title }}</h3>
        <p>{{ info.description }}</p>
    </div>
</div>

目前尚不清楚我在上面的代码中遗漏了什么，导致我的代码根本没有显示。据我所知，控制器或指令一般没有问题，因为我的代码中的另一个指令（代码未显示）工作得很好。

根据Chrome的代码检查器，这就是代码编译后的内容：

...
<div class="container-fluid work-wrapper">
    <div class="container work-container">
        <!-- ngRepeat: work in works -->
        <div ng-repeat="work in works" class="ng-scope">
            <work-expo info="work">
                <!-- ngIf: info.orientation === 'landscape' -->
                <!-- ngIf: info.orientation === 'portrait' -->
            </work-expo>
        </div>
        <!-- end ngRepeat: work in works -->
    </div>
</div>
...

现在显然，它没有返回下的任何DOM元素，而应该是这种情况。

如果您需要任何进一步的详细信息，请与我们联系。感谢。

Answer 1

您的指令中的范围绑定不正确。您需要构造一个具有info属性的对象，并将其双向绑定添加到info属性。 Yu可以这样做：

 scope: {info:'=info'},

这会在作用域上创建一个info属性，用于评估info属性的值，即评估父作用域上的work。

因此，您的完整指令代码变为：

app.directive("workExpo", function() {
    return {
        restrict: 'E',
        scope: { info: '=info' },
        templateUrl: 'views/directives/workExpo.html'
    };
});

其他一切都可以保持不变。

Working JsFiddle

Answer 2

<!-- ngIf: info.orientation === 'landscape' -->
<!-- ngIf: info.orientation === 'portrait' -->

它显示两者都不匹配所以没有显示

我检查你的代码，它看起来不错，做一件事来检查价值，把下面的代码放在你页面的任何地方

<pre>
   {{ info | json}} - {{ info.orientation | json}} 
</pre>

ng-if指令：这里有什么问题？

2 个答案: