Question

我传递了这个示例的链接，我有一个名为“greeting”的变量，它在模态窗口中更改其值但不绑定。不分享范围？

http://jsfiddle.net/Bibidesign/Lodkh4jy/7/

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
  $scope.greeting = 'Hello!';


  $scope.changeValues = function() {

        var modalInstance = $modal.open({

            templateUrl: 'myModalContent.html',

            backdrop: 'static',

            scope: $scope, 

            controller: function($scope, $modalInstance) {

                    $scope.greeting = "Welcome";

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

              $scope.ok = function(){
                         modalInstance.close();
                  }                

            }

        });

    };
}]);

Answer 1

您无法将网址引用text/ng-template作为templateUrl。相反，将html表单添加到单独的html文件中，并在模态声明中引用它。

这是一个有效的笨蛋https://plnkr.co/edit/lMZK0uGNsEmRjAN7teVZ?p=preview

Answer 2

你部分在那里。我们只需要设置在GreetingController和模态controller之间传递变量。我们将对传递给$modal.open()的对象使用resolve属性将值传递给模态controller，而当我们关闭模态时，我们将通过结果对象传递新值。我们也删除scope: $scope，因为控制器声明覆盖了范围副本，我们希望将这些范围分开。示例要遵循。

This answer对解决方案的内容进行了更全面的解释，但它基本上只是一种简化的方法来解决承诺，并在初始化模态之前保证数据在控制器中。

myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) {
    $scope.greeting = 'Hello!';


    // this will handle everything modal
    $scope.changeValues = function() {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            backdrop: 'static',
            // resolve is an object with all the objects we will pass to the controller
            // I'm adding more than just greeting for examples sake
            resolve: {
                greeting: function () {
                    return $scope.greeting;
                },
                testData: function () {
                    return "This is some random test data";
                }
            }
            // on the controller parameters, we add the properties we are resolving
            controller: function($scope, $modalInstance, greeting, testData) {

                // the greeting variable passed in through resolve
                console.log('greeting', greeting); // expected output: greeting Hello!
                // the testData passed in through resolve
                console.log('testData', testData); // expected output: testData This is some random test data

                // this will be the greeting you are able to access on the modal
                // we can set this to the value from the resolve or a new value like below
                $scope.greeting = "Welcome";
                //$scope.greeting = greeting // this will set the modal to the value passed in from the resolve

                // NOTE*** I changed this call to dismiss()
                $scope.cancel = function(){
                    modalInstance.dismiss();
                }  

                $scope.ok = function(){
                    // what ever we pass in to close will be accessible in the result below
                    // we are passing in the new greeting - 'Welcome'
                    modalInstance.close($scope.greeting);
                }                
            }
        });

        // this is the majority of the new code
        modalInstance.result.then(function(okReturnObject){
            // this okReturnObject will be whatever you pass in to modalInstance.close()
            console.log('return', okReturnObject); // expectedOutput: return Welcome

            // this is where we are setting the original value to the new value from the modal
            $scope.greeting = okReturnObject;
        },function(){
            // will be run after modalInstance.dismiss()
            console.log("Modal Closed");
        });
    };
}]);

从模态Angularjs绑定

2 个答案: