Question

我有一个用于加载数据的链接，然后我想要改变CSS样式。我希望加载数据并从一次点击事件中发生CSS更改。

<section ng-controller="OffrdHeadCntrl">
<section id="menuOff" ng-class="{true: 'OpenMenu', false: 'ZeroWide'}[MenuStatus]">
    <b>Menu</b><br>
    <nav>
       <ul id='OffrdCat'>
          <li><a href="#Antiques">Antiques</a></li>
          <li><a href="#Appliances">Appliances</a></li>
       </ul>
    </nav>
</section>
     .... More HTML in another section here.
</section>

这是routeProvider：

var ysshApp = angular.module('ysshApp', [
  'ngRoute',
  'ysshControllers',
  'firebase'
]);
  // 'ysshServices'

ysshApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/Antiques', {
        templateUrl: 'Client_Pages/Offered_Menu.html',
        controller: 'CommonController',
        customInput: 'zeg0yv7nxle6a5sr2xl-ezs'
      }).
      when('/Appliances', {
        templateUrl: 'Client_Pages/Offered_Menu.html',
        controller: 'CommonController',
        customInput: 'zh86tu488b8g6maw9wrfk'
      })
      .otherwise({ redirectTo:'/Tab_Home_1' });

  }]);

当用户点击“古董”时，会加载一堆数据。该链接触发URL更改，这会导致$ routeProvider使用然后加载数据的控制器。我还有一个改变CSS样式的函数：

这是加载数据的控制器：

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

ysshControllers.controller('CommonController',
    function($scope, $http, $route) {
        $scope.dbKey = $route.current.customInput;
        $scope.urlToDb = 'https://' + $scope.dbKey + '.firebaseio.com/.json';
        $http.get($scope.urlToDb).success(function(data) {
            var values = [];
            for (var name in data) {
            values.push(data[name]);
            }
            $scope.UsedItems = values;
            });
            // Initially order by date and time
            $scope.orderProp = 'Time';
            }     
        );

有功能/控制器吗？这改变了CSS :(我剥掉了一些东西）

 function OffrdHeadCntrl($scope) {
    $scope.OpenCloseMenu = function() {
            if ($scope.MenuStatus === true) {
                $scope.OutputStatus = 'MuchWide';}
            else
                {$scope.OutputStatus = 'FullWideVal';}
 };
}

我可以让要更改的CSS或要加载的数据，但不能同时加载。我已经尝试将ng-click="OpenCloseMenu()"放在各种各样的地方，但是routeProvider可以工作，或者CSS更改可以工作，但不能同时工作。

我已尝试在公共控制器中添加代码行，但这不起作用。我可以添加在数据加载完成后运行的事件吗？我见过创建一个与多个控制器相关的服务的例子，但它用于绑定数据，而不是运行按钮点击事件。

我正在尝试更改CSS，以便在加载数据之前隐藏页面的菜单部分。在加载数据之前，我可以使用Resolve对象属性来首先解决某些问题。这可行，但我在配置控制器时遇到问题，因此它可用。我可以让Resolve工作，但我无法启动功能。如果我将此添加到routeProvider，将弹出警报消息，然后一旦我单击OK，数据就会加载。

            resolve: {
                // Run code in resolve first
                whatever: function() {
                alert("it ran");
                }
            }

如果我可以获得运行所需的功能，这对我有用，但我还没想到。

我成功运行$routeChangeSuccess，但它在加载数据之前运行。

ysshControllers.controller('OffrdCatChg', function($scope) {
    $scope.$on('$routeChangeSuccess', function(){
        alert("it ran the success?");
    });
});

所以，我认为这不会对我有所帮助。我创建了一个新的控制器，并将控制器的名称放入该页面的HTML标记中。它在路由更改时运行，但在数据加载之前运行。这没关系，但我的其他一些代码后来运行，并将CSS设置回原始代码。必须有一种方法来测试已经运行的特定控制器。

Answer 1

由于加载的数据伴随着url更改，因此可以直接访问链接，而不仅仅是点击之前的链接，因此您应该首先放入数据加载。

对于CSS更改，它是一个状态反射的东西，与url更改密切相关（如果我理解你的描述正确），所以你应该听一下url change事件，比如rootController（除了ng-view），例如：

    $scope.$on '$routeChangeSuccess', (e, current, previous) ->
        //getting url segments, and updates css as it should be
    return

我的逻辑是：

click the link ---> router change ---> new controller(data load)
                    |
                    |
                    |--------->routeChangeSuccess event ---> update the css

Answer 2

我能够找到解决方案。首先，我认为我的控制器定义错了。我定义了一个函数，它正在工作，但我不认为它设置正确。我有一个这样的函数：

function CntrlMyCSS($scope) {
    $scope.OpenCloseMenu = function() {
            if ($scope.MenuStatus === true) {
                $scope.OutputStatus = 'MuchWide';}
            else
                {$scope.OutputStatus = 'FullWideVal';}
 };
}

我没有将它绑定到模块，或者定义为控制器。这是新的变化。

<强> ysshControllers.controller（ 'HideShowInOffered'，

ysshControllers.controller('HideShowInOffered',
 function CntrlMyCSS($scope) {
    $scope.OpenCloseMenu = function() {
            if ($scope.MenuStatus === true) {
                $scope.OutputStatus = 'MuchWide';}
            else
                {$scope.OutputStatus = 'FullWideVal';}
 };
}
);

所以，我想即使我添加了

ng-controller="CntrlMyCSS"

到一个HTML标签，它工作，它不是一个真正的控制器？ IDK的。我使用函数的名称作为控制器。我知道将它定义为控制器似乎使得该控制器内的东西可用于我的其他控制器。我仍然不太明白，但基本上我只是在函数顶部添加了一行来将它绑定到模块，并将其定义为控制器，并将HTML标记更改为控制器的名称而不是名称功能。

另一个有用的功能是能够通过设置断点，单步行和查看指定值来调试代码。如果不是那样的话，我可能仍然会走不通的路。

修复基本上只是调整我设置的内容。我尝试了$routeChangeSuccess，但是通过单步执行代码，我看到它在加载数据之前就已经开始了。这对我不起作用，因为控制器正在设置页面最初加载时的默认CSS值。所以它会改变CSS，然后将其设置回原始版本。发生的速度如此之快，如果没有调试器，我就不会知道。

$scope.$on('$routeChangeSuccess', function(){
    alert("it ran the success?");
});

尝试通过routeProvider获得修复似乎没有任何用处。这基本上是可以调用代码的问题，并且通过调试了解程序流程的时间。

故事的教训？花点时间确保您有办法逐步完成代码，并确定程序流程是什么。可能有无数的错误猜测，也许只有一个解决方案。除非你可以调试，否则可能性很大。

这是加载数据的控制器，然后格式化数据，然后更改CSS以关闭菜单。

ysshControllers.controller('CommonController',
    function($scope, $http, $route) {
        $scope.dbKey = $route.current.customInput;
        $scope.urlToDb = 'https://' + $scope.dbKey + '.firebaseio.com/.json';
        $http.get($scope.urlToDb).success(function(data) {
            var values = [];
            for (var name in data) {
            values.push(data[name]);
            }
            $scope.UsedItems = values;
            });
            // Initially order by date and time
            $scope.orderProp = 'Time';
            $scope.MenuStatus = false;
            $scope.OutputStatus = 'FullWideVal';
            }
);

如何路由URL请求以获取数据，还运行一个函数来更改angularjs中的CSS？

2 个答案: