Question

My application有一个自定义模板扩展指令，用于创建多个section-toggle元素。 section-toggle元素表示用户点击以切换页面上多个section元素之一的显示的按钮。

<div ng-controller="NavCtrl">

    <nav>
        <section-toggler toggle="section1">Toggle Section 1</section-toggler>
        <section-toggler toggle="section2">Toggle Section 2</section-toggler>
        <section-toggler toggle="section3">Toggle Section 3</section-toggler>
    </nav>

    <article>
        <section ng-show="shownSection == 'section1'">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
        <section ng-show="shownSection == 'section2'">Mauris dignissim vehicula risus ac vestibulum.</section>
        <section ng-show="shownSection == 'section3'">Vivamus congue risus at tortor varius egestas.</section>
    </article>

</div>

我的控制器范围有一个名为shownSection的属性（表示页面上显示哪个部分的字符串）和一个名为toggleSection()的函数，它将shownSection的值设置为任意值值存在于toggle元素的section-toggler属性中。

app.controller("NavCtrl", function ($scope) {
    $scope.shownSection = 'section1';
    $scope.toggleSection = function(section) {
        $scope.shownSection = section; 
    };
});

app.directive('sectionToggler', function() {
    return {
        restrict: 'E',
        scope: false,
        link: function(scope, element, attrs) {
            element.bind("click", function(){
                scope.toggleSection(attrs["toggle"]);
            });
        }
    }
});

我遇到的问题是该指令似乎没有改变控制器的$scope.shownSection值，这反过来会显示和隐藏各个部分。

我认为指令定义对象中的scope = false会强制指令使用NavCtrl的范围，而attrs("toggle")会获得section-toggler的值'toggle属性。

无效，我尝试使用this.attr("toggle")和element.attr("toggle")代替attrs["toggle"]（没有一项工作），我尝试更改$scope.shownSection = section控制器到shownSection = section。

这是JSFiddle。

Answer 1

点击切换器切换实际上会更改$scope.shownSection。您可以通过在console.log($scope.shownSection)功能底部添加$scope.toggleSection来验证这一点。

问题是bind（如在element.bind("click"中）是一个jqLite / jQuery函数，它不会触发Angular的摘要循环。当摘要循环运行时，Angular将更新UI以反映更新的模型值。

要手动触发，您可以使用$apply：

element.bind("click", function () {
  scope.$apply(function () {
    scope.toggleSection(attrs["toggle"]);
  });
});

演示： http://jsfiddle.net/qdhau2zb/6/

单击处理程序在template-expanding指令中不起作用

1 个答案: