AngularJS - 通過服務從指令更新控制器數據（this.model語法）

我想從指令更新存儲在控制器（this.isUploaded）中的數據（我想將更新綁定到操作上一個DOM元素（在本例中，點擊，在我的應用程序中，通過拖放進行文件上傳））。根據我讀的內容，最好的方法是注入一個服務，這個服務可以作爲應用程序兩部分之間的一個簡單數據綁定。整個代碼中，我用的是下面的（從這個post啓發，這不符合指令工作）：AngularJS - 通過服務從指令更新控制器數據（this.model語法）

<body> 
    <div ng-controller="navController as navCtrl"> 
    <p>isUploaded: {{navCtrl.isUploaded}}</p> 
    <div test-view></div> 
    </div> 
</body>

而對於JavaScript的：

angular.module('testApp', []) 
    .directive('testView', ['CreateBindingService', function(createBindingService) { 
    return { 
     restrict: 'EA', 
     template: '<a href="#">Incrementation</a>', 
     link: function(scope, element, attrs) { 
     element.bind('click', function(e) { 
      createBindingService.incrementIsUploaded(); 
      console.log(createBindingService.getIsUploaded()); 
     }); 
     } 
    }; 
    }]) 
    .factory('CreateBindingService', function() { 
    var isUploaded = 1; 
    return { 
     getIsUploaded: function() { 
     return isUploaded; 
     }, 
     incrementIsUploaded: function() { 
     isUploaded++; 
     return isUploaded; 
     } 
    }; 
    }) 
    .controller('navController', ['CreateBindingService', function(createBindingService) { 
    this.isUploaded = createBindingService.getIsUploaded(); 
    }]);

日誌不會像預期的那樣（每次點擊增量更改存儲在服務中的值），但模型中的值未更新。

我試着看看$ watch，但到目前爲止，沒有什麼真的發生，所以它似乎更多的是一個綁定的問題比更新之一。

難道是因爲我使用this.isUploaded而不是$ scope.isUploaded？事實上，我看過後者的大部分帖子都使用了後者，而我使用前者（我學習了Code School的Angular的基礎，他們沒有使用$ scope）。我知道有更簡單的方法可以做到這一點（在這種情況下，它是有意義的，甚至我的「幻想」拖放文件上傳的東西可能可以用簡單的指令替代。但是，我仍然認爲那得到一個回答我的問題，將有助於我更好地理解如何角的作品。

但是，如果你提出一個完全不同的方法來解決這個問題，我很感興趣:)

來源

2014-11-02 Morphilos

得到一個範圍參數到控制器中，設置的範圍，而不是控制器「isUploaded」。 – 2014-11-02 21:08:35

似乎綁定事件我們在Angular範圍之外，所以你可以使用它的範圍。$應用在你的指令中。並且將isUploaded更改爲複雜類型，請參閱下面的演示。

angular.module('testApp', []) 
 
    .directive('testView', ['CreateBindingService', 
 
    function(createBindingService) { 
 
     return { 
 
     restrict: 'EA', 
 
     template: '<a href="#">Incrementation</a>', 
 
     link: function(scope, element, attrs) { 
 
      element.bind('click', function(e) { 
 
      scope.$apply(function() { 
 
       createBindingService.incrementIsUploaded(); 
 
       console.log(createBindingService.getIsUploaded()); 
 
      }); 
 
      }); 
 
     } 
 
     }; 
 
    } 
 
    ]) 
 
    .factory('CreateBindingService', function() { 
 
    var data = { 
 
     isUploaded: 1 
 
    }; 
 
    return { 
 
     getIsUploaded: function() { 
 
     return data.isUploaded; 
 
     }, 
 
     incrementIsUploaded: function() { 
 
     data.isUploaded++; 
 
     return data; 
 
     }, 
 
     data: data 
 
    }; 
 
    }) 
 
    .controller('navController', ['CreateBindingService', 
 
    function(createBindingService) { 
 
     this.data = createBindingService.data; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="testApp"> 
 
    <div ng-controller="navController as navCtrl"> 
 
    <p>isUploaded: {{navCtrl.data.isUploaded}}</p> 
 
    <div test-view></div> 
 
    </div> 
 
</body>

來源

2014-11-02 21:45:19 sylwester

AngularJS - 通過服務從指令更新控制器數據（this.model語法）

回答

相關問題