2016-05-25 36 views
0

我似乎无法得到这个工作。我是angularjs的新手,我正在将现有的Web应用程序转换为使用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> 

正如你所看到的,我有一个自定义的指令,一个主入口,并在自定义侧边栏选择链接或使用时注入的内容的用户界面视图标签浏览器的网址搜索栏。

我的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,在线查看,但没有运气。

在此先感谢!

回答

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

是的......我安慰了价值,这是工作。愚蠢的问题,我如何访问链接方法内的formObject?另外,为什么rootScope并不只是$ scope? – FNMT8L9IN82

+0

questionController的作用域不是指令作用域的父对象,只能传递数据使用$ rootScope – aseferov

+0

我知道,但formObject来自父级的mainController。我只是好奇,如果我可以在链接方法或编译方法中访问formObject。 – FNMT8L9IN82

相关问题