如何使ui-sref在JQuery加载的HTML DOM中工作

Question

我是Angular JS的新手。我正在做的是将ui-sref绑定到JQuery加载的数据上。 所有的JQuery插件和Angular的其余部分都可以正常工作。我现在拥有的是：

app.controller("FeedController", ['$scope', '$http', '$compile', function($scope, $http,  $compile) {

            var feed = this;    
            feed.years = [];

            feed.getYears = function() {
                $http.get('/timeline/years').success(function(data) {
                    feed.years = data;
                });
            };
            feed.getYears();

            $scope.$watch('sliderWrapper', function() {

                applyTreemap(); // jquery treemap layout plugin
                applyKnob(); // jquery knob plugin

            });

            // I was trying to compile externally loaded DOM by that plugin here.
            // Didn't figure out how to do it.
            $scope.refresh = function() {
                // #slider is main content wrapper
                $compile( $("#slider").html())($scope);
            };


        }]);

请不要建议使用AngularJS而不是JQuery。实际上这是一个 Treemap Layout 插件，已经集成到现有网站中。

Answer 1

好的，$compile和我的代码一样，但我遇到了一些问题。这是一个。请考虑以下代码。

<div id="slider">
  <div ng-repeat="slide in slides">
     <!-- html loaded by jquery ajax will go here -->
  </div>
</div>

我正在做角度

$compile( $("#slider").html())($scope);

所以，我正在以角度编译html的{​​{1}}，除了ajax加载的内容之外，它已经有了角度绑定。所以角度编译器会重新渲染它们，你会遇到问题。

所以请记住，你永远不会#slider已经有角度绑定的HTML。

所以我通过

解决了我的问题

$compile

而不是

href="#/path/to/state"

进入ajax加载的conent。

有时候你知道某些事情，当你被困住时，它并不在你的脑海中。 :-D