从控制器更新自定义指令中的值

Question

我似乎无法正常工作。我是 angularjs 的新手，我正在将现有的网络应用程序转换为使用 angularjs。 我环顾四周，似乎找不到答案。

这是主要的html：

<div>
   <custom-header form-object="mainCtrl.form"></custom-header>
   <custom-sidebar form-object="mainCtrl.form"></custom-sidebar>
   <custom-subheader form-object="mainCtrl.form"></custom-subheader>
   <ui-view id="ng_subview"></ui-view>
</div>

如您所见，我有一个包含自定义指令和 ui-view 标记的主条目，当在自定义侧边栏中选择链接或使用浏览器的 url 搜索栏时注入内容。

我的 app.config 文件包含路由配置。

$stateProvider
 .state("parent", {
    url: "", //omitted
    template: "main.html",
    controller: "mainController",
    controllerAs: "mainCtrl",
    abstract: true,
    resolved: {} // omitted
 })
 .state("parent.customer_questions", {
    url: "", //omitted
    template: "customer_questions.html",
    controller: "customerQuestionController",
    controllerAs: "customerQestionCtrl",
 })

主控制器：

function(factory, $stateParams){
  let self = this;
  // Http request
  self.form = factory.getData($stateParams.id).then(function(results){
    return results;
  });  
}

问题控制器：

function(customerQuestionsFactory, $stateParams, $filter, data, $scope){
    let self = this;

    self.customerQuestions = {
        questions: [],
        sendReply: function(index, conversation_id){
          /*
          When I call the method it updates the content of the
          customer question view, and it is working correctly.
          However, the custom sidebar directive keeps track of
          the total of new questions, but the sidebar doesn't update.
          I have tried:
          $parent in this case is the mainCtrl
          $scope.$parent.new_question_total = 100 // this does not work.
          */
        }
    }
 }

侧边栏指令：

function($location){
   return {

       restrict: 'E',
       templateUrl: 'custom_sidebar.html',
       replace: true,
       scope: {
         formObject: "="
       },
       link: function($scope, element, attrs) {
          //code omitted
       }
    }
 }

侧边栏 HTML：

<!-- 
    This is where I'm setting the value.
-->
<a ng-click="" ui-sref="" ng-bind="formObject.new_question_total"></a>  

我需要更新侧边栏视图“formObject.new_question_total”中的值。

这是场景： 当我导航到客户问题视图时，有一个更新客户问题的表单，它会更新内容区域。在此页面上，它会跟踪有多少新问题。显然，更新时，新符号会消失。 在侧边栏上，有一个链接可以导航到包含新问题总数的客户问题页面。如果我更新客户视图，这个数字应该会减少。 我知道第一次加载页面时，指令中的链接函数只被调用一次。

1. 有没有办法从客户问题中调用链接方法 控制器？
2. 我有哪些选择可以实现这一目标？
3. 有没有更好的方法来代替调用链接方法？

我不确定您是否需要更多信息，但如果您需要更多信息，我很乐意添加更多信息。 我曾尝试使用 $apply、$watch、$broadcast，在网上查看过，但没有运气。

提前致谢！

Answer 1

使用 $rootScope.$boradcast

function(customerQuestionsController, $stateParams, $filter, data, $scope, $rootScope){
    let self = this;

    self.customerQuestions = {
        questions: [],
        sendReply: function(index, conversation_id){
           $rootScope.$broadcast('questionUpdate',index)
        }
    }
 }

在指令中

 function($location, $rootScope){
   return {

       restrict: 'E',
       templateUrl: 'custom_sidebar.html',
       replace: true,
       scope: {
         formObject: "="
       },
       link: function($scope, element, attrs) {
          $rootScope.$on("questionUpdate", function(event, data){
              //do something
          });
       }
    }
 }