0

我正在使用 AngularJS 创建一个应用程序，其中为用户提供了他必须包含在他将提交的表单中的单词列表。例如，如果单词列表是“Shnur”和“Bdur”，则如果用户输入：“Shnur 和 Bdur 正在街上散步时......”则该表单将有效，但如果“Shnur 关闭”则无效寻找一些食物。” 因为只包含了两个必填词中的一个。我还希望能够在用户输入后动态更改单词/短语的颜色。

目前，我的控制器中有这个：

    function ($scope, $routeParams, $location, Global, Submissions, Phrases){
          $scope.Global = Global;
          $scope.phrases = _(Phrases).shuffle().slice(0, 5);

我正在注入 Phrases 服务，并随机选择用户必须在提交中加入的一些短语。根据我的研究，下一步似乎是编写一个执行自定义表单验证的指令，但似乎有很多方法可以做到这一点，我真的很难清楚地了解适用于此特定情况的指令。（这是我的第一个真正的 Angular 应用程序）

4

1 回答 1

0

我不完全确定这是最好的解决方案，但这是我会为这样的事情做的：http: //jsfiddle.net/DotDotDot/K2S4v/

正如你所想，我做了一个有点复杂的指令，所以我会在这里解释一下：

该指令的结构类似于：

  1. 在参数中传递要比较的单词列表
  2. 向模板添加输入字段
  3. 听这个领域的修改
  4. 检查生词，并计算匹配词的数量

  5. 显示和类似的东西

    .directive('validate', function(){
return {
    restrict:'A',
    template:see below,
    replace:false,

示例的模板看起来像这样，但实际上它可能是空的，使用它来显示要容易得多
<p><span ng-bind-html-unsafe="theDisplayedText"></span><br/>{{count}} words corresponding</p>

然后，重要的部分，我使用了 compile 函数，添加输入字段，然后在 postLink 函数中指定行为

添加字段（这也可以直接在模板中完成，不是重点）

compile:function(elt,attr){ 
        var inp=new angular.element('<input>')
        inp.attr('type','text')
        inp.attr('ng-model','theText');
        inp.attr('ng-change','changed()');
        elt.append(inp)

然后指定指令如何反应，链接函数： 

       return {
        pre: function preLink(scope, iElement, iAttrs, controller) { 

        },
        post: function postLink(scope, iElement, iAttrs, controller) { 
            scope.count=0;
            var copyOfWords= new Array(iAttrs['list'])//the list to compare with

            scope.changed=function(){
                var alreadyIn=Array();
                scope.theDisplayedText=angular.copy(scope.theText);
                var sliced=scope.theText.split(" ");//we get each word
                scope.count=0
                for(var i=0;i<sliced.length;i++){
                        if(sliced[i].length>3 && copyOfWords.indexOf(sliced[i])!=-1 && alreadyIn.indexOf(sliced[i])==-1)//the word exists and isn't counted yet
                        {
                            scope.count+=1//incrementing the counter
                            alreadyIn.push(sliced[i])//avoiding doubles
                            sliced[i]="<span class='hi'>"+sliced[i]+"</span>"//display in red
                        }
                }
                scope.theDisplayedText=sliced.join(" ");
            }            
        }
      }

该功能非常幼稚且没有真正优化，这可能是您必须更改的部分，但它适用于示例。这很简单，您将整个文本拆分为单词，然后将它们与参数中的单词列表进行比较。它有一些问题（似乎indexOf()在字符串数组上也为每个子字符串返回一个结果，因此如果您开始输入一个单词，它将被计算在内）但这仅用于示例，在您的应用程序中，您可能必须表现得更好检查，或任何你想要的（这是你的应用程序:)）

我希望这对您的申请有所帮助，如果您对指令有一些问题，本网站有很多信息：http: //amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-指令/

玩得开心 =)

于 2013-09-03T22:18:38.047 回答