2016-09-16 3 views
1

Я создал одну директиву, и я ее зацикливаю. Проблема у меня в том, что по какой-то причине $ scope.name показывает название от последней директивы, хотя я изолята SCOPESУгловая директива по обмену областью выпуска

angular.module("testApp") 
.controller("testingCtrl","$scope",function($scope)  { 
    infos =[ 
    { 
     name ="test1" 
    }, 
    { 
     name ="test2" 
    } 
    ] 
    $scope.init=function(name){ 
     $scope.name=name 
    } 
}) 
.controller("directiveCtrl",["$scope",function($scope){ 
     console.log("HEY",$scope.name); 
}]) 
.directive("testing",function(){ 
    return{ 
     restrict:"E", 
     controller:"directiveCtrl", 
     scope:{ 
     name:"=" 
     }, 
     template:"<h1>{{name}}</h1>" 
    } 
}) 
<div ng-app="testApp"> 
    <div ng-controller="testingCtrl"> 
     <div ng-repeat="info in infos" ng-init="init(info.name)"> 
     <testing name="name"></testing> 
     </div> 
    </div> 
</div> 

так он показывает

test2

test2

но то, что я хочу

test1

test2

Благодарим вас за ваше время.

+0

Почему вы создаете объект, чтобы передать в качестве имени? – dwbartz

+0

hi @dwbartz Я пытаюсь воспроизвести сценарий более коротким и более легким для чтения кодом, так как реальный гораздо больше, и он не поместится здесь. – luis

+0

Избавьтесь от ng-init и этой функции init. Игра с прицелом плохая. – gyc

ответ

3

Я не знаю, почему ваше было с этим проблемами, но при попытке воспроизвести вашу проблему, я сделал codepen со следующими изменениями, как я предполагаю, что вы не копируете ваш рабочий Угловой код точно:

  • Установите ng-repeat в info in infos(ваш не работает)
  • Pass info.name директиве вместо {name:info.name}

T HESE изменения приводившая к выходу

test1 
test2 

Вот мой codepen: http://codepen.io/anon/pen/JRKyAK?editors=1010#0

Edit:
С правок, которые вы сделали, у вас есть другая проблема.

Причины вы видите повторен test2, потому что вы вызываете init(info.name) в вашем ng-init для каждого info в infos, как функция инициализации вызываются каждый раз, когда Угловые генерирует один из этих новых див.
Проблема в том, что $scope.init переписывает $scope.name каждый раз, когда ng-repeat создает новый информационный div. Это то, что всегда отображает ваш последний элемент, поскольку ваша директива проходит $scope.name, которая всегда будет содержать имя вашего последнего элемента.

Я бы предложил не использовать ng-init, а скорее передать информация атрибуты, такие как имя непосредственно в директиве, как так:

<testing name="info.name"></testing> 
+0

sorry @Amaan M, я забыл добавить остальную часть, я просто отредактировал сообщение – luis

Смежные вопросы