将第二个范围传递给指令

Question

我已经花了好几个小时才找到解决方案的小问题，我有一个 JSON 其中 returns 我的页面名称 + 一些关于它的信息我将它传递给指令并且一切正常，直到我尝试向显示这些项目的指令添加另一个范围 JSON，json 形式的项目照常显示，但我页面的 url 的第二个范围不是。我究竟做错了什么？

在 ANGULAR 控制器中 pageURL = 'blabla.com'; $scope.pageURL = pageURL;

ANGULAR 指令

    }).directive('itsearchresult', function() {
    return {
        restrict: 'AEC',
        scope: {
            result: '=result',
            pageURL: '@pageURL'
        },
        templateUrl: 'SearchResults.html'
    };

})

HTML

<itsearchresult result="result" pageURL="pageURL"></itsearchresult>

searchResults.html

<div ng-if="result != 2">

<h3 ng-if='result.nameWP == undefined'> <a href="{{pageURL}}{{result.name}}">
{{result.name}}</a></h3>
<h3 > <a href="{{pageURL}}{{result.postID}}">{{result.nameWP}}</a></h3> 

...{{result.content}}...

link -> {{pageURL}} <- 'art' 的这一小块没有显示 :(

请帮帮我，我今天真的不想上吊

Answer 1

像这样尝试。创建自定义指令驼峰式大小写是最佳做法。

AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

 directive('itsearchresult', function() {
    return {
        restrict: 'AEC',
        scope: {
            result: '=result',
            pageUrl: '@pageUrl'
        },
        templateUrl: 'SearchResults.html'
    };

<itsearchresult result="result" page-url="{{pageURL}}"></itsearchresult>

Answer 2

好吧，既然你没有对你的指令做任何事情，你应该删除那个指令的范围并让它使用父级的范围。

}).directive('itsearchresult', function() {
    return {
        restrict: 'AEC',
        templateUrl: 'SearchResults.html'
    };

})

<itsearchresult></itsearchresult>

现在这里的所有调用都必须针对您的控制器范围

<h3 ng-if='result.nameWP == undefined'> <a href="{{pageURL}}{{result.name}}">
{{result.name}}</a></h3>
<h3 > <a href="{{pageURL}}{{result.postID}}">{{result.nameWP}}</a></h3> 

...{{result.content}}...

您的快速解决方案是重命名页面-url 键

<itsearchresult result="result" page-url="pageURL"></itsearchresult>

在你的指令中

}).directive('itsearchresult', function() {
    return {
        restrict: 'AEC',
        scope: {
            result: '=result',
            pageUrl: '@pageUrl'
        },
        templateUrl: 'SearchResults.html'
    };

})

将第二个范围传递给指令

Pass second scope to directive

javascript

angularjs

angularjs-directive

angularjs-scope