javascript - AngularJs 将参数值传递给 Controller

Question

我的 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">

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

我所做的:我研究了很多文章，这些文章演示了如何将指令参数传递给 Controller ​​，但它们非常复杂。

我认为下一步是:

1) 将指令参数传递给 Controller ​​，然后将 Controller 绑定(bind)到文本框，并将文本框的值设置为参数值。

2)或者还有其他方法可以做到这一点吗？

我不知道如何继续。

Answer 1

您可以使用@来使用属性字符串绑定(bind)

1. 在 Controller 中初始化userEmail变量

2. 指令有一个 user-email 属性，该属性将值加载到指令的 userEmail 本地范围变量中。

3. 使用 userEmail:'@' 允许从 Controller 到指令的字符串绑定(bind)。

请参阅下面的演示:

angular.module("app",[]).directive('application', function() {
  return {
    restrict: 'E',
    scope: {
      userEmail : '@'
    },
    templateUrl: 'Form.html'
  };
}).controller("ctrl",function($scope){
  $scope.userEmail="hello@hotmail.com";
});

<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>