AngularJS在模板中不起作用

时间:2016-05-08 18:28:36

标签: javascript angularjs

我正在使用AngularJS材质模态窗口从用户输入中获取数据。 Index.cshtml调用函数js showAdvanced()showAdvanced() invokin templateUrl: 'Template/Test.html',包含带输入的字段。主要问题是为什么<input ng-model="user.password" type="password" />中的Test.html不会更改$scope.user = { email: 'your@mail.com', password: '' };中的密码值。

HomeComtroller:

namespace Modal.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public void Login(string email,string password)
        {
            Console.WriteLine(email);
        }
    }
}

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/Custom.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.0.8/docs.css" rel="stylesheet"/>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.css" rel="stylesheet" />

<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/angular-animate/angular-animate.js"></script>
<script src="~/Scripts/angular-aria/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.js"></script>
<script src="~/Scripts/Modal.js"></script>

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
    <div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">
       <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
            Custom Dialog
        </md-button>
    </div>
    <script type="text/ng-template" id="Test.html">
        <md-input-container>
            <label>Email</label>
            <input ng-model="status" type="email">
        </md-input-container>
        <md-input-container>
            <label>Password</label>
            <input ng-model="user.password" type="password" />
        </md-input-container>
        <table>
            <tbody>
                <tr>
                    <td>
                        <md-button ng-click="answer('not useful')">
                            Go
                        </md-button>
                    </td>
                    <td>
                        <md-button ng-click="answer('useful')" style="margin-right:20px;">
                            Cancel
                        </md-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>
</div>

的JavaScript

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia,$http) {
  $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
  $scope.user = { email: 'your@mail.com', password: '' };
  $scope.showAdvanced = function(ev) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;

    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'Template/Test.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: useFullScreen
    })
    .then(function (answer) {
        $http({
            method: 'POST',
            url: 'Home/Login',
            data: JSON.stringify({ email: $scope.user.email ,password: $scope.user.password })
        });
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });



    $scope.$watch(function() {
      return $mdMedia('xs') || $mdMedia('sm');
    }, function(wantsFullScreen) {
      $scope.customFullscreen = (wantsFullScreen === true);
    });

  };

});

function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

0 个答案:

没有答案