Та же директива с другим сообщением - AngularJS

#javascript #angularjs #angularjs-directive

#javascript #angularjs #angularjs-директива

Вопрос:

У меня есть такие кнопки, как отправить, отклонить и отменить. Если я нажму на эту кнопку, появится небольшой div с комментарием и появится кнопка ok и cancel. При нажатии кнопки ok всплывает всплывающее окно с сообщением «вы уверены».

 <button type="button" ng-click="showDiv = !showDiv">Submit
</button>
<button type="button" ng-click="showDiv = !showDiv">Reject
</button>

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

 <div ng-show="showDiv">
 <yes-no msg="are you sure"></yes-no>
</div>

Теперь я хочу изменить сообщение при нажатии каждой кнопки. Предположим, если я нажму «Отправить», мое сообщение должно быть «вы уверены, что отправите», если я нажму «отклонить», мое сообщение должно быть «вы уверены, что отклоните».

директива:

 mainapp.directive('yesNo', function($modal){
    return {
        restrict: 'A',
        scope: {
            msg: '@msg'
        },
        link: linkFn
    };

    function linkFn(scope, element, attrs) {
        var msg = attrs.msg;
        var modalTemplate =  '<div class="modal-content">'  
                        '   <div class="modal-body">'  
                        '       <h4 class="modal-title">'   msg   '</h4>'  
                        '   </div>';
           var modalInstance = $modal.open({
               template: modalTemplate,
               controller: 'yesNoModalCtrl'
           });
       });
    }
});

Как этого добиться? Я не смогу опубликовать код здесь.

1. Добавьте данные в свою директиву submit-msg и reject-msg

2. Почему вы не можете опубликовать код здесь? По крайней мере, включите некоторый соответствующий код, иначе я не смогу опубликовать ответ здесь.

3. @Weedoze я хотел бы отобразить сообщение на основе нажатия кнопки. Если я нажму кнопку отправки, то как я могу определить, нажал ли я кнопку отправки?

4. @devqon я постараюсь опубликовать соответствующий код

5. @devqon я опубликовал пример кода.

Ответ №1:

 <input type="button" name="submit" ng-click="buttonclick('are you sure to submit')"/>

<input type="button" name="reject" ng-click="buttonclick('are you sure to reject')"/>

<div ng-show="showDiv">
 <yes-no msg={{message}}></yes-no>
</div>

В вашем главном контроллере:

 app.controller("mainController", function($scope){

$scope.message="";
$scope.buttonclick = function(msg){
   $scope.message= msg;
}
});
app.directive("yesNo", function(){
     return{
     restrict: 'E',
     scope:{
     msg:'@'
    }, 
    link: linkFn,
    controller: 'yesNoModalCtrl'
    }
});

В директивах функция ссылки

 function linkFn(scope, element, attrs) {

    attrs.$observe('msg', function(msg) {
        // this function gets triggered each time "msg" is changed
        // You can do whatever you want here
        if (msg) {
            var modalTemplate = '<div class="modal-content">'  
                '   <div class="modal-body">'  
                '       <h4 class="modal-title">'   msg   '</h4>'  
                '   </div>';
            var modalInstance = $modal.open({
                template: modalTemplate,
                controller: 'yesNoModalCtrl'
            });
        }

    });
}

плунжер

1. <тип ввода =»кнопка» имя =»отправить» ng-click=»сообщение =»вы уверены, что отправите» » /> <тип ввода = «кнопка» имя =»отклонить» ng-click =»сообщение =»вы уверены, что отклоните» «/> но яя получаю сообщение как пустое во всплывающем окне

2. У вас есть сообщение, объявленное в области видимости?

3. ДА. Теперь я изменил код, указанный вами. Даже сейчас я получаю сообщение как пустое

4. Спасибо, это работает, но я получаю два одинаковых popu: ( Я попытался отменить привязку события click, но все равно получаю два popu.

5. мой плохой, я дал привязку не в том месте. Это работает как шарм, большое спасибо Рави 🙂

Ответ №2:

Создайте функцию контроллера:

 $scope.showModal = function(msg) {
    $scope.showDiv = !$scope.showDiv;
    $scope.msg = msg;
}

И в ваших кнопках:

 <button type="button" ng-click="showModal('Are you sure')">Submit
</button>
<button type="button" ng-click="showModal('Some other text')">Reject
</button>

<div ng-show="showDiv">
    <yes-no msg="msg"></yes-no>
</div>