AngularJs将参数值传递给控制器

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

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

我做了什么：我研究了很多关于如何将指令参数传递给控制器​​的文章，但它们非常复杂。

我认为下一步是什么：

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

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

我不知道如何继续。

Answer 1

您可以通过@ 使用属性字符串绑定

1. 在控制器中初始化你的userEmail变量

2. 指令有一个user-email属性，可以将值加载到指令的userEmail局部范围变量中。

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

请看下面的演示：

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>