如何從Angular.js中的其他指令控制器更新指令$ scope？

我有事件從我服務的服務加載列表的diretive：

.directive('appointments', [function() { 
     return { 
      restrict: 'CE', 
      scope: { 
       ngTemplate: '=', 
      }, 
      controller: ['$scope','calendarService', function ($scope, calendarService) { 
       var vm = this; 
       vm.events = calendarService.getEvents(); 
      }], 
      controllerAS:'vm', 
      link: function (scope, elem, attrs) { 
       scope.getTemplateUrl = function() { 
        if (angular.isDefined(scope.ngTemplate)) 
         return scope.ngTemplate; 
        else 
        return "/list.directive.html"; 
       } 
      }, 
      template: '<div ng-include="getTemplateUrl()"></div>' 
     } 
    }])

現在在另一個指令我更新這份名單，我怎麼可以更新第一個控制器列表？在第一個指令使用

此：

.directive('appointmentsUpdate', [function() { 
      return { 
       restrict: 'CE', 
       scope: { 
        ngEventId: '=', 
       }, 
       controller: ['$scope','calendarService', function ($scope, calendarService) { 
        var vm = this; 
        vm.update = calendarService.updateEvent(scope.ngEventId).then(function(res){ 


    // Here is where the newly created item, should be added to the List (vm.events) from first directive 

) 
}); 
       }], 
       controllerAS:'vm', 
       link: function (scope, elem, attrs) { 
        scope.getTemplateUrl = function() { 
         if (angular.isDefined(scope.ngTemplate)) 
          return scope.ngTemplate; 
         else 
         return "/list.directive.html"; 
        } 
       }, 
       template: '<div ng-include="getTemplateUrl()"></div>' 
      } 
     }])

來源

2017-06-14 jhon dano

可以使用角廣播服務此

$rootScope.$broadcast('greeting', data_needs_to_be_send);

其他指令

監聽事件來更新其範圍：

$scope.$on('greeting', listenGreeting) 

    function listenGreeting($event, message){ 
    alert(['Message received',message].join(' : ')); 
    }

來源

2017-06-14 06:59:25

這是正確的方法嗎？ –

是的，你可以做到這一點，並將永遠工作，因爲它的一個角度特徵。但它不僅是你可以使用service.but的方式，但它的超級容易實現。 –

我認爲這是兩條指令之間溝通的正確途徑。使用$ broadcast和$ emit將創建鬆散耦合的指令。我的建議是使用$ scope。$ broadcast，如果您的'appointmentmentsUpdate'指令是'約會'指令的子元素。 $ rootScope將把事件廣播到應用程序中的所有子範圍。 –

我們使用require道具在指令之間進行溝通。

像這樣的事情

return { 
    restrict: 'AE', 
    require: '^ParentDirective or ^SameLevelDirective' 
}

這裏是Driectives That Communicate by ToddMotto

來源

2017-06-14 07:01:17

能否請您提供一個基於上述代碼的例子？我通讀了文章並嘗試了，但它不工作？！ –

服務是單身了明確的解釋，所以如果你從一個地方更新列表（與您calendarService.updateEvent()），然後如果你檢索數據從其他指令中的服務中，它應該是更新的列表。您可以使用手錶來檢查清單何時更新：

$scope.$watch(() => calendarService.getEvents(), (newValue, oldValue) => { 
    // update your scope with the new list 
}, true);

來源

2017-06-14 09:41:18 Sophie

如何從Angular.js中的其他指令控制器更新指令$ scope？

回答

相關問題