AngularJs传递参数值到控制器

我的HTML：AngularJs传递参数值到控制器

<test-app email="[email protected]"></test-app>

我的指令：

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

我在另一个页面表单：

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

问题：我需要得到的参数值，并在文本框本身上打印出来。

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

我认为是下一个步骤：

1）通指令参数到控制器，然后绑定控制器到文本框，并设置文本框的值设定为参数值。

2）或者有另一种方法可以做到这一点？

我被困在如何继续。

来源

2017-01-09 John Tan

首先尝试按照指令命名convension（** **驼峰），例如：指令名'makeBold'然后用它模板如：'' –

@AvneshShakya编辑。但这不会帮助开始。任何提示继续？ –

你想要'电子邮件'值在指令中，是否正确？所以试试这个：范围：{userEmail：'@email'}，'在你的模板中：''详细检查隔离范围[这里]（https://jsfiddle.net/avnesh2/fzyo5p0t/?utm_source=website&utm_medium=embed&utm_campaign=fzyo5p0t） –

您可以使用使用@

属性字符串结合在控制器你初始化userEmail变量
的指令有它加载值到指令的userEmail一个user-email属性局部范围变量。
使用userEmail:'@'允许从控制器到指令的字符串绑定。

请参见下面的演示：

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

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

来源

2017-01-09 16:13:46 kukkuz

你的答案是有点接近。但是我希望用户可以直接输入的指令中的值例如：。我想'test @ hotmail。com'被插入到表单的文本框 –

@JohnTan好吧，我不确定你在找什么，你可以使用''？ – kukkuz

@JohnTan只是跟进这个 - 所以你设法解决这个问题？如果这个答案有帮助，upvote /也接受，谢谢！ – kukkuz

AngularJs传递参数值到控制器

回答

相关问题