Изолировать переменную области не определено

Question

По какой-то причине я не могу получить доступ к переменной «index» переменной изоляции в моей функции ссылок. Я пробовал как @, так и =, чтобы узнать, не имеет значения, и это не повлияло, я также попытался использовать слово, отличное от индекса (в случае, если оно уже использовалось угловым или что-то еще) с тем же результатом. Ошибка. Msg: ReferenceError: index is not defined.

директива:

var jobernizeDirectives = angular.module('jobernizeDirectives', []); 

jobernizeDirectives.directive('viewLargeContent', function() { 
    return { 
     scope: { 
      index: '=index' 
     }, 
     require: 'ngModel', 
     link: function (scope, el, attrs, ngModel) { 

      console.log(index); 

      function openEditor() { 
       console.log(index); 

       var main_container = angular.element('.main_container'); 
       var view_frame = angular.element('.view-frame'); 

       console.log(ngModel); 

       main_container.append('<div class="dimmer"></div>'); 
       main_container.append(

         '<div class="large-content' + index + '">' 
        + '<textarea>' + ngModel.$viewValue + '</textarea>' 
        + '<button>Submit Changes</button>' 
        + '</div>' 

       ); 

       var dimmer = angular.element('.dimmer'); 
       var content_container = angular.element('.large-content' + index);  

       // content_container.css({ marginTop: (content_container.height()/-2), width: view_frame.width(), marginLeft: (view_frame.width()/-2) }) 
       content_container.css({ height: (0.8*main_container.height()), width: view_frame.width(), marginLeft: (view_frame.width()/-2) }) 

       content_container.find('button').on('click', function() { 
        var new_content = content_container.find('textarea').get(0).value; 

        ngModel.$setViewValue(new_content); 

        content_container.hide(); 
        dimmer.hide(); 
       }); 
      } 

      // el.on('click', openEditor); 
      el.on('click', openEditor); 

     } 
    } 
}); 

HTML:

<div data-ng-controller="resumesController"> 

    <div class="row"> 
     <div class="small-12 columns"> 
      <h2>Your Resumes</h2> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="small-12 columns"> 
      <table> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Category</th> 
         <th>Date Added</th> 
         <th>View/Edit Resume</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr data-ng-repeat="resume in resumes"> 
         <td>{{ resume.name }}</td> 
         <td>{{ resume.category }}</td> 
         <td>{{ resume.date_added }}</td> 
         <td><button index="le" view-large-content data-ng-model="resume.content">View Resume</button></td> 
        </tr> 
       </tbody> 
      <table> 
     </div> 
    </div> 

</div> 

Answer 1

Index является атрибутом вас объекта области действия, поэтому доступ к нему, как это:

scope.index 

Оба '@' или «=» будет работать, разница в том, что «@» будет интерполировать значение и обновить изолированную область при ее изменении, а «=» означает «Угловой шок» uld сохраняет атрибут и изолированную область в синхронизации. Если переменные имеют такое же имя, вы можете использовать синтаксический сахар

scope: { 
    index: '@' 
}, 

Вот JSBin с вашим кодом.