当模型更新时角模板指令失败

Question

我正在尝试使用AngularJs指令构建导航菜单。我正在使用超级鱼jQuery菜单插件。

它的工作很好，除了两个问题。

1. 一旦模型改变，jQuery插件就会失败。
2. 为了使插件工作，我必须在指令的“链接”方法中设置一个超时。这不是一个优雅的解决方案。

这里有一个jsFiddle：http://jsfiddle.net/ashraffayad/xRB9u/

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


myApp.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) {
    return {
        restrict: 'E', //Element
        scope: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.menuData, function (val) {
                var template = angular.element('<ul class="sf-menu"  id="parentTreeNavigation"><li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" >{{node.text}}</a><sub-navigation-tree></sub-navigation-tree></li></ul>');
                var linkFunction = $compile(template);
                linkFunction(scope);
                element.html(null).append(template);

            }, true);
            setTimeout(function(){
            $('.sf-menu').superfish();
            },1000);
        }
    }
}]);
myApp.directive('subNavigationTree', ['$compile', function ($compile) {
    return {
        restrict: 'E', //Element
        scope: true,
        link: function (scope, element, attrs) {
            scope.tree = scope.node;
            if (scope.tree.children && scope.tree.children.length) {
                var template = angular.element('<ul class="dropdown "><li ng-repeat="node in tree.childrehttp://jsfiddle.net/ashraffayad/TwZ25/#runn" node-id={{node.' + attrs.nodeId + '}}  ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-unsafe="node.text"></a><sub-navigation-tree tree="node"></sub-navigation-tree></li></ul>');

                var linkFunction = $compile(template);
                linkFunction(scope);
                element.replaceWith(template);
            } else {
                element.remove();
            }

        }
    }
}]);

function MyCtrl($scope) {
    $scope.changemodel = function(){
        $scope.model[0].text = "some other text";
    };
    $scope.model = [
        {"text":"someText", "href":""},
        {"text":"someText", "href":""},
        {"text":"someText", "href":"", 
         "children":[{}]
        }
    ];
    $scope.name = 'Superhero';
}

而html：

<div ng-controller="MyCtrl">Hello, {{name}}!
     <button ng-click="changemodel()">change model</button>
<nav-menu menu-data="model"></nav-menu>

</div>

注意:由于某些原因，jsFiddle不喜欢在模型中添加子数组。但是这个例子就像它在我的pc上一样工作，没有jsFiddle上的错误。

谢谢。

Answer 1

我想我喜欢挑战：

http://jsfiddle.net/xRB9u/8/

你的小提琴出了很多问题。从记忆中：

• 如果要使用scope: true隔离作用域，则需要从类似于(如$rootScope、$scope.$parent或某些服务)的地方获取数据。我更改了您的作用域，以便它通过您的指令所关心的项。
• 这还允许您只需在模板中使用menuData，而不是尝试像以前那样将其作为对象连接起来，无论如何，这都是行不通的……它相当于for node in [object Object]
• subNavigationTree也需要同样的治疗。你也许可以像以前那样在范围内穿插，但这种方法更容易，也更简单。
• 在指令模板的中间粘贴了一个jsFiddle Url。