Javascript angularJS$http后的Jquery函数

我正在构建一个搜索应用程序。我正在使用来自的highlighter函数。 在angularJS$Http调用之后，所有数据都被绑定。我创建了一个指令来调用Highlighter函数

searchApplication.directive('highlighter', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.highlight(scope.searchText);
        }
    }
});

这是控制器 `searchApplication.controller（'searchController'，函数（$scope，$http，searchService）{

}))`

这是服务

searchApplication.factory('searchService', function ($http, $q) {
return {
    doSearch: function (_searchText) {
        var deferred = $q.defer();
        var searchURL = '/Search';
        $http({
            method: 'POST',
            url: searchURL,
            params: { searchText: _searchText }
        })
        .success(function (data, status, headers, configs) {
            deferred.resolve(data);
        })
        .error(function (data, status, headers, configs) {
            deferred.reject(data, status, headers, configs);
        });
        return deferred.promise;
    }
}

}))

在html中，我有以下内容

<td ng-repeat="col in row.fields" highlighter>
     {{col.Value}}
</td>

{{col.Value}}

指令没有获取要搜索的值，而是获取{{col.value}}，因此无法高亮显示

我做错了什么？如何获得实际的绑定值，以便对其进行操作？有更好的方法吗

---

更新：使用给定代码中的控制器和服务代码

，如果控制器正确设置了

$scope.searchText

，它应该可以正常工作。我在我的应用程序中定义了您的指令，并在Chrome中调试了

link（）

函数，并且

scope.searchText

按预期找到。如果从浏览器调试中发现

scope.searchText

未定义

更新：根据您的评论，这里的问题似乎是Angular内的执行顺序。显然，链接函数是在文本插值完成之前被调用的，因此解决方案是在继续突出显示部分之前等待该过程

这里的技巧是在
col.Value
中进行更新，然后调用高亮显示逻辑。下面的代码应该可以做到这一点：

app.directive('highlighter', function ($log) {
    return {
        restrict: 'A',
        compile: function compile(element, attributes) {
            // at this point, we still get {{col.Value}}
            var preinterpolated = element.text().trim();

            // removing the enclosing {{ and }}, so that we have just the property
            var watched = preinterpolated.substring(2, preinterpolated.length - 2);
            $log.info('Model property being watched: ' + watched);

            return {
                post: function (scope, element) {
                    // we watch for the model property here
                    scope.$watch(watched, function(newVal, oldVal) {
                        // when we reach here, text is already interpolated
                        $log.info(element.text());
                        element.highlight(scope.searchText);
                    });
                }
            };
        }
    };
});

这一次，
$log
逻辑应该打印出插值，而不仅仅是
col.value


UPDATE2:我不太确定如何使用该指令，但如果您不介意使用角度过滤器，可以尝试此角度UI解决方案。将
js
文件附加到页面后，只需在应用程序中包含
'ui.highlight'
模块，即可使用过滤器。它也像您的
jquery
lib一样小：


您可以在此处尝试实时示例：


您的HTML现在应该如下所示（不再需要该指令）：

scope.searchText向我显示了除了此行元素之外的值。高亮显示（scope.searchText）；。element.node.data没有显示绑定值，而是显示了{{col.value}}。我已经用服务和控制器更新了我的帖子。请查看更新的解决方案。我没有使用jquery或hightlight插件（我的应用程序是纯角度的），但至少从我的测试来看，逻辑现在是在文本插值步骤之后执行的。这仍然保持文本的原样。我实际上看到了scope.col.Value中的值，所以我尝试这样做，如果（scope.col.Value==scope.searchText），那么scope.col.Value='@gkbinary请查看更新的解决方案。如果您不介意使用角度过滤器而不是jquery函数，它就可以工作。这样，您也就不需要指令了。@gkbinary还添加了另一个更新，以防您仍然想尝试在指令上做更多的工作。
app.directive('highlighter', function ($log) {
    return {
        restrict: 'A',
        compile: function compile(element, attributes) {
            // at this point, we still get {{col.Value}}
            var preinterpolated = element.text().trim();

            // removing the enclosing {{ and }}, so that we have just the property
            var watched = preinterpolated.substring(2, preinterpolated.length - 2);
            $log.info('Model property being watched: ' + watched);

            return {
                post: function (scope, element) {
                    // we watch for the model property here
                    scope.$watch(watched, function(newVal, oldVal) {
                        // when we reach here, text is already interpolated
                        $log.info(element.text());
                        element.highlight(scope.searchText);
                    });
                }
            };
        }
    };
});

<td ng-repeat="col in row.fields">
   {{col.Value | highlight:searchText}}
</td>

setTimeout(function () {
    element.highlight(scope.searchText);
}, 300);