将第二个范围传递给指令
Pass second scope to directive
我已经花了好几个小时才找到解决方案的小问题,
我有一个 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' 的这一小块没有显示 :(
请帮帮我,我今天真的不想上吊
像这样尝试。创建自定义指令驼峰式大小写是最佳做法。
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>
好吧,既然你没有对你的指令做任何事情,你应该删除那个指令的范围并让它使用父级的范围。
}).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'
};
})
我已经花了好几个小时才找到解决方案的小问题, 我有一个 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' 的这一小块没有显示 :(
请帮帮我,我今天真的不想上吊
像这样尝试。创建自定义指令驼峰式大小写是最佳做法。
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>
好吧,既然你没有对你的指令做任何事情,你应该删除那个指令的范围并让它使用父级的范围。
}).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'
};
})