Question

我有一个div。单击时，将显示模态窗口。我正在使用angular-ui作为模态窗口。所以请遵循此处的文档：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');
                };
            }
        });
  };
}

工作人员：http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

我想重构一下。我想创建像这样使用的自定义指令：

<div my-modal>test</div>

到目前为止，我希望与代码具有相同的行为。我开始重构，但只能做到这一点：

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");
            };
        }
    }
});

我对角度很新，如果有人提供工作实例并对其进行一些解释，我将非常感激。感谢。

Answer 1

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

我认为这就是你想要的。如果您对该代码有任何疑问，请与我们联系。

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');
                };
            }
        });
        }
      }
    };
});

重构简单角度指令的问题

1 个答案: