Question

我想要完成的是在页面加载时将正文背景设置为随机图像。我尝试了服务和控制器功能。

问题在于这是有效的，但如果我做任何工具提示，点击按钮，甚至在页面上打开检查器，那么该方法会再次被触发。

目前：

app.service('getBodyStyle', function () {
  var bgs = [ 
    //list of jpgs
  ]
  var rand = Math.floor(Math.random() * bgs.length);
  var bg   = bgs[rand];

  return { "background": "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('./Images/"+bg+"') no-repeat center center fixed" };
});

和html：

body layout="column" ng-style="getBodyStyle()" ng-controller="AppCtrl">

Answer 1

当视图中的任何模型更新时，应用程序将刷新视图。

使用变量存储函数的结果。

   var listak=new List<Data>{obj,obj2,obj3,obj4};
    var u = listak.OrderByDescending(s => s.date).TakeWhile(s => s.date > DateTime.Now).Select(s=>new
    {
        name=s.name,
        date=s.date,
        data=s.data.Split(new []{"-"},StringSplitOptions.None).Select(m=>new
        {
            word = m.Where(c=>m.StartsWith("word")).Select(c=>m.Remove(0,4))//this line is incorrect, i dont know how to correct this part
        })

    });

或允许服务记住最后的结果：

<body layout="column" ng-style="bodystyle" ng-controller="AppCtrl">

Answer 2

每次摘要周期运行时都会调用该方法，这会发生很多事情。我建议将服务注入AppController，将结果设置为范围/控制器上的对象，然后从ng-style访问该对象。

Answer 3

您应该将ng-style设置为范围属性，并仅在控制器激活时触发该方法。并将jpgs列表移动到app模块上的配置常量。如果在其他地方使用该功能，则将其保留为服务并将其注入控制器。然后在getBodyStyle控制器方法中使用它。

(function () {
    angular.module ("app")
        .controller ("bodyController", bodyController);

    bodyController.$inject = [/* deps */];

    function bodyController (/* deps */) {
          var vm = this;

          vm.backgroundStyle = "";

          activate ();

          function activate() {
               getBodyStyle();
          }

          function getBodyStyle() {
               //....
               vm.backgroundStyles = styles;
          }
    }
})();


<body ng-controller="bodyController as vm" ng-style="vm.backgroundStyle">

AngularJS身体功能随机脱落

3 个答案: