棘轮切换 - 通过角度指令设置变量和从模板访问

Question

我是Angular的新手，想要从指令设置范围变量的值，并从模板文件中访问它，但它不起作用。

我正在使用Ratchet Toggle，并希望获得用户已关闭的所有切换。我能够写入控制台，但无法从模板文件中读取。

这是我的指示：

mobileApp.directive('whenToggled', [function() {
    function linkFunction(scope, element, attr) {
        scope.$watch(function() {
            setTimeout(function(){
                var has_class = element.hasClass('active');
                var id = element.attr('id');
                if(has_class==false){
                    scope.unwanted_ingredients += id;
                }
                else
                    scope.unwanted_ingredients = "none";
             },0)
        }, function(value) {
            //
        });

    }
    return {
        restrict: 'A',
        scope: true,
        link: linkFunction,
    };
}]);

这是我的模板代码：

Ingredients: {{unwanted_ingredients}}

<ul class="table-view">
    <li class="table-view-cell">
        Item 1
        <div id="item1" class="toggle" when-toggled ng-click="">
        <div class="toggle-handle"></div>
        </div>
    </li>
    <li class="table-view-cell">
        Item 2
        <div id="item2" class="toggle active" when-toggled ng-click="">
        <div class="toggle-handle"></div>
        </div>
    </li>
    <li class="table-view-cell">
        Item 3
        <div id="item3" class="toggle" when-toggled ng-click="">
        <div class="toggle-handle active"></div>
        </div>
    </li>
    <li class="table-view-cell">
        Item 4
        <div id="item4" class="toggle" when-toggled ng-click="">
        <div class="toggle-handle"></div>
        </div>
    </li>
</ul>

在初始加载时填充了unwanted_ingredients，因为我在控制器上将其设置为：

$scope.unwanted_ingredients = "abc";

但是没有通过指令链接更改该值。感谢您对此的意见，因为我不太清楚范围如何与Angular一起使用。