ng-click切换变量并更新整个页面

时间:2014-08-04 14:00:18

标签: angularjs

我有一个名为RecruiterDashboard.IsColdList的全局变量。它是一个布尔值,决定运行一个或另一个指令。加载页面时,通过正常脚本将变量设置为true或false。

我想要做的是允许用户切换ng-click而不是显示其他指令,所以我进行了ng-click并将RecruiterDashboard.IsColdList从'false'设置为'true' 。问题是这不会重新加载角度页面并关闭控制器。如何让页面再次通过控制器?

这是我到目前为止所做的:

$scope.showColdList = function (projId) {
        RecruiterDashboard.isColdList = true;
    };

我想指出我没有使用角度路由。我正在使用C#MVC。

我的逻辑是这样的:

callPanelControllers.controller('callPanelController', function($scope) {
    $scope.isColdList = RecruiterDashboard.isColdList;
});

callPanelControllers.controller('incomingCall', function ($scope) {
     $scope.showColdList = function () {
        RecruiterDashboard.isColdList = true;
    };
});

<div ng-click="showColdList()" ng-controller="incomingCall"></div>
<div ng-controller="callPanelController">
    <cold-list ng-show="isColdList"></cold-list>
</div>

1 个答案:

答案 0 :(得分:1)

我开发了一种hack,以便在更改某个变量时重新加载给定元素内的整个内容。

csapp.directive("csReloadOn", ["$timeout", function ($timeout) {

    var getTemplate = function () {
        return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>';
    };

    var linkFunction = function (scope, element, attrs) {
        scope.doRefreshPageOnModeChange = true;

        scope.$watch(attrs.csReloadOn, function (newVal, oldVal) {
            if (newVal === oldVal) return;

            scope.doRefreshPageOnModeChange = false;
            $timeout(function () { scope.doRefreshPageOnModeChange = true; }, 100);
        });
    };

    return {
        restrict: 'A',
        transclude: true,
        template: getTemplate,
        link: linkFunction
    };
}]);

你可以像

一样使用它
     <div cs-reload-on="{{pagemode}}"> 
           <!-- your html here-->     
      </div>

所以它只是删除并重新呈现div中的完整内容,所以一切都重新初始化等等。