从控制器

时间:2016-05-25 13:40:05

标签: angularjs angular-directive angular-controller

我似乎无法让这个工作。我是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. 有没有更好的方法来执行此操作而不是调用链接方法?
  4. 我不确定您是否需要更多信息,但如果您需要更多信息,我将很乐意添加更多信息。 我尝试过使用$ apply,$ watch,$ broadcast,在网上看,但没有运气。

    提前致谢!

1 个答案:

答案 0 :(得分:2)

使用$ 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
          });
       }
    }
 }