AngularJs将参数值传递给控制器

时间:2017-01-09 15:56:42

标签: javascript angularjs angularjs-directive controller

我的Html:

<test-app email="hello@hotmail.com"></test-app>

我的指示:

.directive('testApp', function () {
return {
    restrict: 'E',
    scope: {
        userEmail = '@userEmail'
    },
    templateUrl: 'Form.html'
};
})

我的表格在另一页:

<label> Email </label>
<input type="text" id="email">

问题:我需要获取参数值,并将其打印在文本框本身上。

我做了什么:我研究了许多文章,这些文章展示了如何将指令参数传递给控制器​​,但它们非常复杂。

我认为下一步是什么:

1)将指令参数传递给控制器​​,然后将控制器绑定到文本框,并将文本框的值设置为参数值。

2)或者还有另一种方法可以做到这一点吗?

我被困在如何继续。

1 个答案:

答案 0 :(得分:0)

您可以使用@

使用属性字符串绑定
  1. controller 中初始化userEmail变量

  2. 指令具有user-email属性,可将值加载到指令的userEmail本地范围变量中。

  3. 使用userEmail:'@'允许从控制器到指令的字符串绑定

  4. 见下面的演示:

    &#13;
    &#13;
    angular.module("app",[]).directive('application', function() {
      return {
        restrict: 'E',
        scope: {
          userEmail : '@'
        },
        templateUrl: 'Form.html'
      };
    }).controller("ctrl",function($scope){
      $scope.userEmail="hello@hotmail.com";
    });
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="app" ng-controller="ctrl">
      <application user-email="{{userEmail}}"></application>
      <script type="text/ng-template" id="Form.html">
        <label>Email</label>
        <input type="text" id="email" ng-model="userEmail">
      </script>
    </div>
    &#13;
    &#13;
    &#13;