从Angular指令更新NG的ng

Question

我正在尝试单击通过中继器创建的列表项目，并更新NG-Inlude使用的模板值。控制器中设置的初始值正常工作（显示在DOM中），但是，当我更改指令中的值时，它不会更新DOM（保留为初始包含的DOM）。当我在指令上使用火错误时，范围似乎已经改变了，尽管我不确定是否缺少某些东西，或者是否应该以其他方式进行此操作。

这是我的部分

 <div ng-controller="menuCtrl" >
    <ul class="sub-menu">
        <li ng-repeat="item in menuItems.left" menu-repeater-directive>
            <span>{{item.name}}</span>
            <a class="reset-menu-btn">&#215;</a>
        </li>
    </ul>
    <div  id="lft-wrapper" class="a-wrapper">
        <div ng-include="template.url" id="lft-scroller" class="a-scroller"></div>
    </div>
</div>

这是我的菜单控件

angular
.module('simApp')
.controller("menuCtrl", function($scope, $element) {
    $scope.menuItems = {
        left: [
            {
                name: "Table of Context",
                url: "static/partials/tree.html"
            },
            {
                name: "Index",
                url: "static/partials/dictionary.html"
            },
            {
                name: "Exercises",
                url: "static/partials/exercises.html"
            },
            {
                name: "Search Results",
                url: "static/partials/results.html"
            }
        ],
        right: [
            {
                name: "About Writer's Help",
                url: "static/partials/about.html"
            },
            {
                name: "Tags & Tools",
                url: "static/partials/tools.html"
            },
            {
                name: "Your Class",
                url: "static/partials/class.html"
            },
            {
                name: "Top Ten",
                url: "static/partials/top10.html"
            }

        ]
    }
    $scope.template = $scope.menuItems.left[0];

});

这是我的指示

angular
    .module('simApp')
    .directive("menuRepeaterDirective", function() {
        return function(scope, element, attrs){
            var self = this;
            this.scope = scope;
            this.element = element;
            var $ele = $(element);
            $ele.find("span").fastClick(function(ev){
                //angular specific
                var index = $(ev.currentTarget).parent().index();
                self.scope.template = self.scope.menuItems.left[index];
                //end angular specific
               ....some other Jquery stuff
            });

        }
    });

Answer 1

尝试：

self.scope.$apply(function(){ //Use $apply to let angular aware of the changes.
       var index = $(ev.currentTarget).parent().index();
       self.scope.$parent.template = self.scope.menuItems.left[index]; //accessing self.scope.$parent instead of self.scope
 });

演示

说明为什么我们必须访问self.scope。$ parent：

self.scope是ng-repeat生成的当前项目的范围，而您的ng-include与Menuctrl的范围结合。在这种情况下，self.scope.$parent是Menuctrl的范围。