2017-02-21 62 views
0

меня эту директиву для простой кнопкиУгловая прохождение информации через директиву

App.directive('questionbutton', function(){ 
    return { 
     restrict: 'E', 
     templateUrl: 'views/question-button.html' 
    }; 
}); 

У меня есть другая директива для простого модального с формой в это

App.directive('questionmodal', ['Question', function(Question){ 
    return { 
     restrict: 'E', 
     templateUrl: 'views/questionmodal.html', 
     link: function (scope, element, attrs) { 

      var question = {}; 
      var author = {}; 
      scope.sendQuestion = function(){ 
       question.body = scope.question.body; 
       new Question(question).$save(); 
      }); 
     }; 
    } 
    }; 
}]); 

вот мой questionmodal.html:

<div id="questionModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title">Contact Team ?</h4> 
      </div> 
      <div class="modal-body"> 
       <form class="form-horizontal" role="form" name="questionForm"> 
<!-- Subject --> 
        <div class="form-group form-group-sm"> 
         <label for="inputSubject" class="col-sm-3 control-label">Subject *</label> 
         <div class="col-sm-9"> 
          <input type="text" class="form-control" required data-ng-model="about" id="inputSubject"> 
         </div> 
        </div> 

        <!-- Body --> 
        <div class="form-group form-group-sm"> 
         <label for="inputBody" class="col-sm-3 control-label">Body *</label> 
         <div class="col-sm-9"> 
          <textarea rows="10" class="form-control" required data-ng-model="question.body" id="inputBody"></textarea> 
         </div> 
        </div> 

       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="sendQuestion()" data-ng-disabled="questionForm.$invalid">Send</button> 
      </div> 
     </div> 
    </div> 
</div> 

в HTML-странице Я использую данные-нг-повтор инициализировать простую таблицу:

<table class="table table-striped table-condensed"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Action</th> 
     </thead> 
     <tbody> 
      <tr data-ng-repeat="application in applications"> 
       <td>{{application.id}}</td> 
       <td>{{application.name}}</td> 
       <td> 
        <questionbutton about="{{applicaiton.name}}"></questionbutton> 
       </td> 
     </tbody> 
</table> 
<questionmodal></questionmodal> 

Вот вопрос-button.html:

<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#questionModal"> 
    <a href="" style="color:white;" data-toggle="tooltip" data-container="body" title="Any question about this item ? Please, Tell us !"> 
     <span class="glyphicon glyphicon-question-sign glyphicon-white" ></span> 
    </a> 
</button> 

Моя проблема заключается в том, как я могу поделиться «о» свойства от моей кнопки в моей модальные в хорошем смысле?

ответ

1

Вы можете пойти с нижеуказанным подходы

  • Service/Factory: Крит или использовать любые существующие данные фабричных/услуг и обмениваться ими через него среди директив.
  • Использование сфера: Поскольку обе директивы используются под контроллером вы можете легко использовать «сферу» в директиве и обмениваться данными либо с «=» или «@»
+0

Я не вижу, как это сделать с помощью «=» или «@», поскольку мои данные поступают после инициализации вопросника и вопросника. Что касается сервиса/фабрики I не вижу, как ... Можете ли вы показать мне пример? – RVA

+0

Возможно ли, что вы сможете получить его на плункере или в любом другом онлайн-редакторе? Потому что я не вижу «question-button.html» и объясняю что вы хотели бы достичь, разделив несколько свойств на один модальный? –

+0

Я сохранил его, но никогда не использовал плункер. Я попробую n ow, чтобы поместить мой код на него и поделиться им – RVA

1

сначала удалите фигурные скобки, когда вы Распределите данные ДИРЕКТИВА прицел

<questionbutton about="applicaiton.name"></questionbutton> 

Теперь вы можете передать значение для первой директивы (questionbutton). Из этого вы можете сообщить сферу действия между такими директивами.

App.directive('questionbutton', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       about: "=" 
      } 
      templateUrl: 'views/question-button.html', 
      link: function(scope, element, attrs) {} 
     }; 
    }); 
    App.directive('questionmodal', ['Question', function(Question) { 
     return { 
      restrict: 'E', 
      templateUrl: 'views/questionmodal.html', 
      link: function(scope, element, attrs) { 
       console.log(scope.about); 
       var question = {}; 
       var author = {}; 
       scope.sendQuestion = function() { 
        question.body = scope.question.body; 
        new Question(question).$save(); 
       }); 
      }; 
     }; 
    }]); 

проверить это похоже answer

+0

в директиве questionbutton, является «ссылка» обязательным? – RVA

+0

nope. вы можете это исключить. ссылка, используемая для написания логики для этой директивы –

+0

console.log оставил меня «неопределенным» в консоли, кроме того, в html-коде я вижу about = application.name вместо имени приложения – RVA

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

  • Нет связанных вопросов^_^