Angular Material: $scope 无法在 md-tab 中获取 ng-model

Question

HTML:

<div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-app="MyApp">
  <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex">
      <md-tab label="Login">

        <form name="loginForm">
          <md-input-container>
            <label>Username</label>
            <input type="text" name="login_username" ng-model="login_username" required>
          </md-input-container>
          <md-input-container>
            <label>Password</label>
            <input type="password" name="login_passwd" ng-model="login_passwd" required>
          </md-input-container>

          <md-button class="md-button md-raised" ng-disabled="loginForm.$invalid" ng-click="login()">Login</md-button>
        </form>
      </md-tab>
    </md-tabs>
  </md-content>

</div>

JS:

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', AppCtrl);

  function AppCtrl ($scope) {
    $scope.login = function(){
      alert($scope.login_username);
      alert(this.login_username);
    }
  }
})();

http://codepen.io/anon/pen/xGdqwa

如果我将表格移到外部 md-tabs，一切正常。

为什么$scope无法在md-tabs中得到ng-model？

Answer 1

那应该显示错误，如果有的话，更改：.module('MyApp') 到 .module('MyApp', [])

Answer 2

这是一个 angular 作用域继承问题，md-tabs 正在使用子作用域。看到这个问题，相同的解决方案将适用于您：

Answer 3

两件事：

您没有在模块中添加 ngMaterial 作为依赖项像这样
在你的控制器中创建一个对象

   (function () {
      'use strict';
      angular
          .module('MyApp',['ngMaterial'])
          .controller('AppCtrl', AppCtrl);

      function AppCtrl ($scope) {

          $scope.login = {
              username: 'email@example.com', 
              passwd: ''
          };

        $scope.dologin = function(){
          alert($scope.login.username);
          alert(this.login.username);
        }
      }
    })();

HTML

<div ng-app="MyApp">
    <div ng-controller="AppCtrl">
        <form name="loginForm" >
            <md-tabs md-dynamic-height md-border-bottom>
              <md-tab label="login">
          <md-input-container>
            <label>Username</label>
              <input type="text" name="login_username" ng-model="login.username" required />
          </md-input-container>
          <md-input-container>
            <label>Password</label>
              <input type="password" name="login_passwd" ng-model="login.passwd" required />
          </md-input-container>

          <md-button class="md-button md-raised" ng-disabled="loginForm.$invalid" ng-click="dologin()">Login</md-button>

              </md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
            </md-tabs>
        </form>
    </div>
</div>

fiddle link

说明：自定义指令有自己的范围，当你使用ng-model时，变量属于默认范围，在你的情况下md-tabs ，要解决此问题，您可以在控制器中初始化 ng-model。

Answer 4

不要忘记点。

您没有将模型附加到对象，因此失去了模型的范围。

而不是

ng-模型="login_username"

尝试使用

ng-模型="login.username"

Angular Material: $scope 无法在 md-tab 中获取 ng-model

Angular Material: $scope can't get ng-model in md-tab

angularjs

angular-material