Fatal编程技术网
  • javascript/
  • Javascript ng if指令：What'；这里的问题是什么？

Javascript ng if指令：What'；这里的问题是什么？

javascript html angularjs dom

Javascript ng if指令：What'；这里的问题是什么？,javascript,html,angularjs,dom,Javascript,Html,Angularjs,Dom,我无法找出导致我的div中没有显示任何内容的错误 <pre> {{ info | json}} - {{ info.orientation | json}} </pre> HomeController.js（控制器）： app.controller('HomeController', ['$scope', function($scope) { $scope.icons = [ ... ]; $scope.works =

我无法找出导致我的
div中没有显示任何内容的错误


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


HomeController.js（控制器）：


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."
        }
    ];
}]);



<!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>



app.directive("workExpo", function() {
    return {
        restrict: 'E',
        scope: 'info',
        templateUrl: 'views/directives/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>


index.html（主页）：


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."
        }
    ];
}]);



<!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>



app.directive("workExpo", function() {
    return {
        restrict: 'E',
        scope: 'info',
        templateUrl: 'views/directives/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>


workExpo.html（指令模板）：


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."
        }
    ];
}]);



<!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>



app.directive("workExpo", function() {
    return {
        restrict: 'E',
        scope: 'info',
        templateUrl: 'views/directives/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>




{{info.title}}
{{info.description}}

{{info.title}}
{{info.description}}



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

根据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元素，应该是这样

如果你需要任何进一步的细节，请告诉我。谢谢。


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




这表明两者不匹配，因此不显示任何内容

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



{{info | json}}-{{info.orientation | json}

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


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


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

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

其他一切都可以保持不变


您是否尝试过使用
==
而不是
=
来检查这是否有效？我没有看到
workExpo.js
的源代码，您提供的只是该文件的模板。@JoseM啊，对。我好像错过了。我现在已经包括在内了。请检查一下。@DHP是的，是我做的。没什么区别，退房。您似乎没有正确绑定您的作用域。是否要我将其放入指令中？我这样做了，它只显示一个带有连字符（
-
）的空白
pre
引导框。我不知道为什么会这样。这意味着你的信息值为空，现在你知道了错误，所以你可以修复它，检查其他代码行为什么你得到空。我更正了范围绑定，它工作正常。但我不明白它是如何始终与我之前创建的指令一起工作的。你能解释一下为什么它在其他时候有效，但这次不行吗？