Angular Bootstrap对话框和ng-view的问题

时间：2014-10-01 19:13:57

标签： angularjs dialog ngroute ng-view angular-bootstrap

当我尝试使用ngRoute在ng-view标签内使用Dialog时，我有一个使用angular with angular-bootstrap的简单问题。

在此plunker中，您可以看到工作版本，whitout ngRoute和ng-view。

使用Javascript：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.items = ['item1', 'item2', 'item3'];
$scope.historias = [
     {id:1, nome:'teste para historia 1 do anderson'},
     {id:2, nome:'teste para historia 2 do anderson'},
     {id:3, nome:'teste para historia 3 do anderson'},
     {id:4, nome:'teste para historia 4 do anderson'},
     {id:5, nome:'teste para historia 5 do anderson'},
     {id:6, nome:'teste para historia 6 do anderson'},
     {id:7, nome:'teste para historia 7 do anderson'},
     {id:8, nome:'teste para historia 8 do anderson'},
     {id:9, nome:'teste para historia 9 do anderson'},
     {id:10, nome:'teste para historia 10 do anderson'},
];

$scope.abre = function(size,historia){
alert('clicou');
var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    },
    historia: function(){
      return historia;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.historia = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
}
});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items,historia) {

$scope.items = items;
$scope.historia = historia;
$scope.selected = {
item: $scope.items[0]
};

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

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

HTML：

    <!doctype html>
    <html ng-app="ui.bootstrap.demo">
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div>
      <div ng-controller="ModalDemoCtrl">
        <div>
          <script type="text/ng-template" id="myModalContent.html">
              <div class="modal-header">
                  <h3 class="modal-title">I'm a modal!</h3>
              </div>
              <div class="modal-body">
                  <input ng-model="historia.id">
                  <input ng-model="historia.nome">
                  <ul>
                      <li ng-repeat="item in items">
                          <a ng-click="selected.item = item">{{ item }}</a>
                      </li>
                  </ul>
                  Selected: <b>         {{ selected.item }}</b>
                  Selected Historia: <b>{{ historia }}</b>
              </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>
          </script>

          <button class="btn btn-default" ng-click="open()">Open me!</button>
          <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
          <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
          <div ng-show="selected">Selection from a modal: {{ selected }}</div>
          <div ng-show="historia">Selection from a modal Historia: {{ historia }}</div>
          <li ng-repeat="historia in historias"><a href="#" ng-bind="historia.id" ng-click="abre('lg',historia)"></a> - <span ng-bind="historia.nome"></span></li>
        </div>
      </div>
    </div>
  </body>
</html>

在this中，你可以看到角度没有正确更新范围。

使用Javascript：

angular.module('ui.bootstrap.demo', ['ngRoute','ui.bootstrap']).config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'view1.html',
                controller: 'ModalDemoCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.historias = [
         {id:1, nome:'teste para historia 1 do anderson'},
         {id:2, nome:'teste para historia 2 do anderson'},
         {id:3, nome:'teste para historia 3 do anderson'},
         {id:4, nome:'teste para historia 4 do anderson'},
         {id:5, nome:'teste para historia 5 do anderson'},
         {id:6, nome:'teste para historia 6 do anderson'},
         {id:7, nome:'teste para historia 7 do anderson'},
         {id:8, nome:'teste para historia 8 do anderson'},
         {id:9, nome:'teste para historia 9 do anderson'},
         {id:10, nome:'teste para historia 10 do anderson'},
    ];

  $scope.open = function (size,historia) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      translucente: true,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        historia: function(){return historia;}
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };


});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items,historia) {

  $scope.items = items;
  $scope.historia = historia;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

HTML：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-view>

    </div>
  </body>
</html>

查看：

<div ng-controller="ModalDemoCtrl">
  <div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <input ng-model="historia.id">
            <input ng-model="historia.nome">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>         {{ selected.item }}</b>
            Selected Historia: <b>{{ historia }}</b>
        </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>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    <div ng-show="historia">Selection from a modal Historia: {{ historia }}</div>
    <li ng-repeat="historia in historias"><a href="#" ng-bind="historia.id" ng-click="open('lg',historia)"></a> - <span ng-bind="historia.nome"></span></li>
  </div>
</div>

拜托，有人可以帮助我吗？

0 个答案:

没有答案
相关问题
最新问题