0

我想知道关于 angularjs 模态的软件设计和最佳实践的正确方法是什么。在我的应用程序中，我有一个使用自己的控制器的主窗口，并且我有一个用于模态的 show()、hide() 和 destroy 函数。我的主窗口上的一个按钮将显示（）模式，我将有一个隔离范围，其中包含从父范围继承的变量，以及它自己的控制器。我希望能够将一个对象传递给对话框，以便对其进行“修改”操作，以及一个“创建”按钮，该按钮关闭模态并创建在模态中输入的数据的新对象。

我面临两个问题： 1. 无法从主控制器的范围和模态控制器中的范围传输对象，除非有 1 个带有预定义对象的控制器，然后我可以向其中添加数据（但为什么它有效？ ) 2. 与 show(),hide() 不一致： show() 必须驻留在主控制器中，但由于 modal 有自己的控制器，因此必须实现 hide() 和 destroy() ，就代码责任而言，这对我来说感觉很糟糕。

在这种情况下有什么好的做法？

4

2 回答 2

0

不确定这些是否是最佳实践，但它们有效......

1：

在我的控制器中：

$scope.modelData = {};  // This will be loaded from an ajax call or set somehow

在我的对话框指令范围内：

scope: {
    ngModel: "="
}

在我的html中：

<dialog-directive ng-model='modelData'></dialog-directive>

2：我选择传入指令将分配函数的对象。然后，您可以在控制器中使用此对象来执行指令中的操作。

控制器：

$scope.dialogFuncs = {};

指示：

scope: {
    ngModel: "=",
    dialogFuncs: "="
},
controller: ['$scope', function($scope) {
    $scope.dialogFuncs.openDialog = function() {
        // code to open the dialog here
    }

    $scope.dialogFuncs.closeDialog = function() {
        // close dialog code here
    }
}]

html:

<dialog-directive ng-model='modelData' dialog-funcs='dialogFuncs'></dialog-directive>
....
<button ng-click='dialogFuncs.openDialog()'>Open Dialog</button>

希望这可以帮助。

于 2015-02-23T19:18:41.183 回答
0

您可以使用angular-ui 引导程序的 $modal 服务或编写您自己的服务，将您的模式编写为指令，并在您的控制器中使用服务的打开、关闭方法。

例如

 $modal.open({
     template: '<my-modal something="cool"></my-modal>'
 })

您的指令可能是这样的

  restrict: 'E'
  replace: false
  templateUrl: 'yourhtml.html'
  link: ($scope, $element, attrs) ->
      if attrs.something is cool
        console.log('cool')
      else
        $scope.$close()
于 2015-02-23T19:23:03.577 回答