#javascript #angularjs #angular-directive #angular-directive-link
#javascript #angularjs #angular-директива #угловая директива-ссылка
Вопрос:
У меня есть директива, которая находится внутри ng-repeat. Например:
<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index">
<div class="clearfix nx-item-wrapper nx-shaddow1" ng- if="slider.nativeAdHome==='nativeAdHome'">
<nx-dfp-ad carousel-data="0"></nx-dfp-ad>
</div>
</div>
Моя директива:
(function() {
'use strict';
angular
.module(NgApp)
.directive('abc', ABC);
function ABC($compile) {
return {
restrict: "EA",
scope: {
},
link: function (scope, element, attrs) {
scope.count =0;
element.append("<div id='div-" scope.count "' style='height:250px; width:300px;'>");
$compile(element.contents())(scope)
scope.count ;
}
}
}
})();
В ng есть условие -повторите «slider.nativeAdHome», всякий раз, когда оно будет истинным, оно вызовет директиву. Я хочу, чтобы количество должно увеличиваться при каждом вызове директивы. Если он вызывается в первый раз в ng-repeat, значение счетчика должно быть 0, если оно вызывается во второй раз, значение счетчика должно быть 1 и т.д.
Пожалуйста, объясните, как мы можем этого добиться.
Комментарии:
1. Это отвечает на ваш вопрос?
Ответ №1:
Им можно управлять многими способами, некоторые из них:
- двусторонняя привязка, но сложная переменная, подобная объекту —
{ count:1 }
- сервис с переменной и ее использование в контроллере и директиве
- использование локальной переменной в директиве
- удалить изолированную область и увеличить комплексную переменную области
(1) возможное решение — https://jsfiddle.net/maciejsikora/31aqxmy3 / (откройте консоль браузера, чтобы показать результаты).
(4) возможное решение https://jsfiddle.net/maciejsikora/sxn7nkrk/1 / без изолированной области ( откройте консоль браузера, чтобы показать результаты).
(3) Я показываю, как управлять третьим предложением, я создал локальную переменную count внутри функции директивы. Переменная видна только в директиве.
var NgApp=angular.module("app",[]);
(function() {
'use strict';
angular
.module("app")
.controller("cont",Cont)
.directive('abc', ABC);
function Cont($scope){
//example data
$scope.slides=[
{
nativeAdHome:"nativeAdHome"
},{
nativeAdHome:"somethingElse",
},
{
nativeAdHome:"nativeAdHome"
},
{
nativeAdHome:"nativeAdHome"
}
];
};
function ABC($compile) {
//local variable - shared between all directive usage
var count=0;
return {
restrict: "EA",
link: function (scope, element, attrs) {
console.log("Current count = " count);
count ;
}
};
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="cont">
<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index">
<div class="clearfix nx-item-wrapper nx-shaddow1" ng-if="slider.nativeAdHome==='nativeAdHome'">
<abc carousel-data="0"></abc>
</div>
</div>
</div>
Ответ №2:
Выполните сравнение ng-if в контроллере.
В вашем главном контроллере
$scope.countNum= 0;
$scope.IsNativeAdHome = function(slider){
if(slider.nativeAdHome==='nativeAdHome'){
$scope.countNum ;
return true;
}
}
В HTML
<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index">
<div class="clearfix nx-item-wrapper nx-shaddow1" ng-if="IsNativeAdHome(slider)">
<nx-dfp-ad carousel-data="0" count-num={{countNum}}></nx-dfp-ad>
</div>
</div>
В директиве
(function() {
'use strict';
angular
.module(NgApp)
.directive('abc', ABC);
function ABC($compile) {
return {
restrict: "EA",
scope: {
countNum:'@'
},
link: function (scope, element, attrs) {
scope.count = scope.countNum;
element.append("<div id='div-" scope.count "' style='height:250px; width:300px;'>");
$compile(element.contents())(scope)
scope.count ;
}
}
}
})();