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

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 - 查看标签在选择link s中的内容中注入内容，或使用浏览器的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"。

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

有没有办法调用客户提问的link方法控制器？
我有哪些选择可以实现这一目标？
有没有比调用 link 方法更好的方法？

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

提前致谢！

Answer 1

使用 $rootScope.$broadcast

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
          });
       }
    }
 }

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

Update value in custom directive from controller

angularjs

angular-directive

angular-controller