Question

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

我面临两个问题： 1.无法从我的主控制器和我的模态控制器中的范围传输对象，除非有一个带有预定义对象的控制器，然后我可以向其添加数据（但为什么它可以工作？） 2.与show（），hide（）不一致：show（）必须驻留在主控制器中，但由于模态有自己的控制器，它必须实现hide（）＆amp; destroy（），在代码责任方面对我来说非常糟糕。

在这种情况下，什么是好习惯？

Answer 1

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

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>

希望这有帮助。

Answer 2

您可以使用angular-ui bootstrap的$ modal服务或编写自己的服务，将您的模态编写为指令，并使用控制器内的服务的开放，关闭方法。

e.g。

 $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()

angularjs模态传输数据到外部控制器的正确方法？

2 个答案: