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无法在ng-model中获得md-tabs？

Answer 1

两件事：

您没有在模块中添加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 2

别忘了点。

通过不将模型附加到对象上，您将失去模型的范围。

而不是

NG-模型=＆＃34; login_username＆＃34;

尝试使用

NG-模型=＆＃34; login.username＆＃34;

Answer 3

应该显示错误（如果有），将.module('MyApp')更改为.module('MyApp', [])

Answer 4

这是角度范围继承问题，md-tabs使用子范围。看到这个问题，相同的解决方案将适合您：

https://stackoverflow.com/a/30188744/2766511

角度材料：$ scope无法在md-tab中获取ng-model

4 个答案: