我是Stackoverflow的新手。我也是AngularJS的新手。如果我沒有正確使用,我很抱歉。不過,我正在嘗試使用AngularJS創建一個UI控件。我的UI控件將如下所示:在AngularJS中創建可重用組件
+---------------------+
| |
+---------------------+
是。一個文本框,它具有特殊功能。我打算把它放在帶按鈕的頁面上。我的想法是作爲一個開發者,我想給喜歡這類東西:
<ul class="list-inline" ng-controller="entryController">
<li><my-text-box data="enteredData" /></li>
<li><button class="btn btn-info" ng-click="enterClick();">Enter</button></li>
</ul>
請注意,我不希望在我的控制按鍵。我還希望enteredData
在與子控件關聯的範圍內可用。換句話說,當調用enterClick
時,我希望能夠通過$scope.enteredData
讀取值。在嘗試創建my-text-box
,我已經建立了以下指令:
myApp.directive('myTextBox', [function() {
return {
restrict:'E',
scope: {
entered: '='
},
templateUrl: '/templates/myTextBox.html'
};
}]);
myApp.controller('myTextBoxController', ['$scope', function($scope) {
$scope.doSomething = function($item) {
$scope.entered = $item.name;
// Need to somehow call to parent scope here.
};
}]);
myTextBox.html
<div ng-controller="myTextBoxController">
<input type="text" class="form-control" ng-model="query" placeholder="Please enter..." />
</div>
entryController.js
myApp.controller('entryController', ['$scope', function($scope) {
$scope.enteredData = '';
$scope.enterClick = function() {
alert($scope.enteredData);
};
});
現在,我有兩個問題。
- 當
entryController
enterClick
叫,$scope.enteredData
是空的。 - 當
doSomething
在myTextBoxController
被調用時,我不知道如何與entryController通信發生了什麼。
我覺得我已經正確設置了我的指令。我不確定我做錯了什麼。有人可以請指出我正確的方向。