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>