如何在 Angular 1.5 组件中使用绑定

Question

在尝试编写一个简单的登录页面时，我在理解为什么 .components 绑定不起作用时遇到了一些困难。

例子

模板：login.html

    <form>
  <fieldset>
        <label>Email</label>
        <input id="email" type="email" ng-model="login.user.email">

        <label>Senha</label>
        <input type="password" ng-model="login.user.pass">

        <button ng-click="login.test({text: login.user})">
          Entrar
        </button>
  </fieldset>
</form>

组件：login.js

angular
  .module('app')
  .component('login', {
    bindings: {
      user: '<',
      test: '&'
    },
    templateUrl: 'app/login/login.html',
    controller: function ($log) {
      var vm = this;
      vm.user = {
        mail: 'email@provider.net',
        pass: ''
      };
      vm.test = consoleTest;

      function consoleTest(text) {
        $log.info('test! text:'+text);
      }
    }
  });

路线：router.js

angular
  .module('app')
  .config(routesConfig);

/** @ngInject */
function routesConfig($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('login', {
      url: '/login',
      component: 'login'
    });
}

路由未加载并显示错误：

stateService.ts:530 TypeError: Cannot read property '2' of null
    at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7096:54
    at Array.map (native)
    at scopeBindings (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7096:7)
    at getBindings (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7101:17)
    at Array.map (native)
    at getComponentInputs (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7109:21)
    at config.templateProvider (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7074:34)
    at invokeResolveFn (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:2786:37)
    at processQueue (http://localhost:3000/bower_components/angular/angular.js:16843:37)
    at http://localhost:3000/bower_components/angular/angular.js:16887:27
$defaultErrorHandler @ stateService.ts:530
(anonymous) @ stateService.ts:352
processQueue @ angular.js:16843
(anonymous) @ angular.js:16887
$digest @ angular.js:17982
$apply @ angular.js:18280
bootstrapApply @ angular.js:1912
invoke @ angular.js:5003
doBootstrap @ angular.js:1910
bootstrap @ angular.js:1930
angularInit @ angular.js:1815
(anonymous) @ angular.js:33340
trigger @ angular.js:3435
stateService.ts:531 TypeError: Cannot read property '2' of null
    at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7096:54
    at Array.map (native)
    at scopeBindings (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7096:7)
    at getBindings (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7101:17)
    at Array.map (native)
    at getComponentInputs (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7109:21)
    at config.templateProvider (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:7074:34)
    at invokeResolveFn (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:2786:37)
    at processQueue (http://localhost:3000/bower_components/angular/angular.js:16843:37)
    at http://localhost:3000/bower_components/angular/angular.js:16887:27

只需删除绑定中的test: '&' 属性，并且路由在控制台中加载时不会出现错误，但 ng-model 不会链接到控制器，因此它不会使用硬编码值更新输入字段。

我怎样才能使这些绑定起作用？

Answer 1

你需要使用 angularjs lifecycle hooks 来初始化你想要的数据：

vm.$onInit = function() {
  vm.user = {
    mail: 'email@provider.net',
    pass: ''
  };
}

您也不需要绑定测试，因为您可以访问组件中的控制器，因为您使用的是路由组件而不是无状态组件。

如果您使用的是无状态组件，则需要绑定测试并将其用作回调函数，以便在事件发生后将数据传回。