AngularJS內部指令控制器結合

Question

我有我的指令，這個簡單的代碼：

app.directive('ngModal', function ($parse) { 
    return { 
    restrict: 'E', 
    template: document.getElementById('ng-modal').innerHTML, 
    replace: true, 
    controller : "@", 
    name:"controllerName", 
    } 
}) 

<ng-modal controller-name="ModalCtrl"></ng-modal> 

這是我的控制器：

app.controller('ModalCtrl', ['$scope', function ($scope) { 
    $scope.model = 'default text' 
}]) 

<div ng-controller="ModalCtrl"> 
    <input type="text" ng-model="model"> 
</div> 

我想，我的指令內部的模型字段會自動更新。但是我總是在指令內看到「默認文本」，並在控制器內部更改。我該如何綁定它？

Answer 1

你必須添加一個服務來保持控制器之間的信息。控制器總是根據「視圖」創建，所以你的ng-modal和div在使用中有不同的控制器，這就是爲什麼模型數據不會在它們之間更新。

快速例如：

app.service('sharedData', function() { 
    var sharedData = { 
    field: 'default text' 
    }; 

    return sharedData; 
}); 

app.directive('ngModal', function() { 
    return { 
    restrict: 'E', 
    template: '', 
    replace: true, 
    controller : "@", 
    name:"controllerName", 
    } 
}); 

app.controller('ModalCtrl', ['$scope', 'sharedData', function ($scope, sharedData) { 
    $scope.model = sharedData; 
}]); 

<ng-modal controller-name="ModalCtrl">{{model.field}}</ng-modal> 

<div ng-controller="ModalCtrl"> 
    <input type="text" ng-model="model.field"> 
</div>