Question

我想更新主视图之外的指令范围，这是我的代码：

的index.html

<!-- the directive I want to update -->
<nav sitepicker></nav>

<section id="content-wrapper">
    <!-- main content-->
    <div ui-view></div>
</section>

sitepicker只是一个包含一些html结构的下拉菜单。

sitepicker.html

<span>{{currentWebsite}}</span> <-- this is the one I want to update
<ul>
    <li ng-repeat="website in websites">{{website.name}}</li>
</ul>

和JS：

.controller('sitepicker', function($scope, websiteService) 
    $scope.website = websiteService.currentWebsite; // not updating eventhough I update this in overview.js
});

overview.js

.controller('OverviewCtrl', function($scope, websiteService) {
    websiteService.currentWebsite = website; // assume that this value is dynamic
});

但currentWebsite没有改变。我该如何解决这个问题？我想避免使用$rootScope，因为我知道这很糟糕。

这是我的服务：

.factory('websiteService', function() {
   var currentWebsite;
    return {
        currentWebsite: currentWebsite
    };
});

编辑：添加这样的手表有效，但我不确定它是不是很好

.controller('sitepicker', function($scope, websiteService) 
    $scope.$watch(function() {
        $scope.website = websiteService.currentWebsite;
    });
});

Answer 1

解决方案＃1

我们可以添加$watch来实现此目标

.controller('sitepicker', function($scope, websiteService) 
    $scope.$watch(function(){
        return websiteService.currentWebsite;
    }, function(newValue){
        // Do something with the new value
    });
});

解决方案＃2

我们还可以在主控制器中定义websites。然后，我们可以在我们的overview子控制器中更新它，如下所示：

.controller('sitepicker', function($scope, websiteService) 
    $scope.$parent.website = websiteService.currentWebsite;
});

使用$parent

非常重要

由于我们更新了包装整个应用程序的控制器，我们将能够从任何地方，任何指令，控制器，视图等访问它。

AngularJS - 在视图

1 个答案: