Problems with refactoring simple angular directive

Question

I have a div. When it is clicked, modal window appears. I am using angular-ui for the modal window. So following the documentation from here: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/demo.js

html:

<div ng-controller="DemoCtrl">
   <div ng-click="clickMe({ data: 'test'})">test</div> 
</div>

js:

angular.module('plunker', ['ui.bootstrap']);
var DemoCtrl = function ($scope, $modal) {

    $scope.clickMe = function (rowData) {

      var modalInstance = $modal.open({
            template: "<div>Created By:" + rowData.data + "</div>"
                        + "<div class=\"modal-footer\">"
                        + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                        + "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
                        + "</div>",
            controller: function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close({ test: "test"});
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
  };
}

Working plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

I want to refactor this. I want to create custom directive used like this:

<div my-modal>test</div>

I want to have the same behavior as the code so far. I started refactoring but was only able to get that far:

angular.module("myModal", [])
    .directive("myModal", function () {
    "use strict"
    return {
        template: "<div>Created By:" + rowData.CreatedBy + "</div>"
                                    + "<div class=\"modal-footer\">"
                                    + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                                    + "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
                                    + "</div>",
        controller: function ($scope, $modalInstance) {
            //$scope.open = function () {
            //    $modal.open();
            //};
            $scope.ok = function () {
                $modalInstance.close({ test: "test" });
            };

            $scope.cancel = function () {
                $modalInstance.dismiss("cancel");
            };
        }
    }
});

I am quite new to angular and will be very gratefull if someone provides working example with some explanations with it. Thanks.

Jesus is Lord · Accepted Answer · 2014-02-21 14:21:57Z

http://plnkr.co/edit/vYgD97Jhla9euJKeB5Cw?p=preview

I think this is what you want. Let me know any questions you have about the code.

angular.module("myModal", []).directive("myModal", function ($modal) {
    "use strict";
    return {
      template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
      replace: true,
      transclude: true,
      scope: {
        rowData: '&myModal' 
      },
      link: function (scope, element, attrs) {
        scope.clickMe = function () {
            $modal.open({
            template: "<div>Created By:" + scope.rowData().data + "</div>"
                        + "<div class=\"modal-footer\">"
                        + "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
                        + "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
                        + "</div>",
            controller: function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close({ test: "test"});
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
        }
      }
    };
});

Collectives™ on Stack Overflow

Problems with refactoring simple angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related