AngularJS - 傳遞元素融入到劇本和選擇

當模板我在JS提供AngularJS - 傳遞元素融入到劇本和選擇

<div id="container"> 
    <textarea name="message"></textarea> 
    <button value="send" ng-click="testMethod($parent)"> 
</div>

：

$scope.testMethod = function(element) { 
    console.log("sending message"); 
    console.log(element); // comes back with an element 
    console.log(element.children()); // <-- this throws an exception 
    console.log(element.firstChild()); // <-- this throws an exception 
}

簡單地說，我怎麼可以通過將選擇父的子元素元素放入方法中？

來源

2013-05-10 RedactedProfile

Controller上面創建的方法不應直接操作html元素。他們應該只處理模板綁定到的對象。

如果您想要與代碼中的UI元素進行交互，您可以在AngularJS中創建一個directive，並且該元素及其子元素可以在指令函數中輕鬆訪問。通過使用屬性，您可以將指令範圍綁定到控制器範圍屬性和方法，並在控制器功能中的業務邏輯和指令函數中的UI元素之間創建連線。

在AngularJS上有很多關於Directives和Scopes的文檔，沒有經過它就很難完成AngularJS中最簡單的任務。

來源

2013-05-10 21:05:27 Ketan

感謝喲的解釋，有可能得到一個例子嗎？我一整天都在盯着我的監視器（我和Angular纔剛剛見過）。具體來說，我只是試圖創建一個簡單的「類似提交」的東西，試圖獲取textarea的內容（有很多像它在列表中（想想：messenger），沒有任何創建WITH角） – RedactedProfile 2013-05-10 21:13:34

有一個Zippy示例（基本）本頁面http://docs.angularjs.org/guide/directive – Ketan 2013-05-10 23:31:58

有關Angular的事情需要一段時間才能掌握模式和術語。一旦你這樣做了，一切都變得有意義，而且更容易。即使你一次不消化所有東西，我也會從上到下閱讀他們網站上的指南。特別是「指令」，「服務」，「範圍」，「過濾器」。 – Ketan 2013-05-10 23:35:14

Ketan的回答是對的，我想補充一下你爲什麼想要孩子的元素？您通常不直接從控制器操作HTML，但您應該更新您的$ scope的數據，這些數據可以驅動頁面上的更改。只要在一個普通的舊控制器中舉一個例子，我們並不關心element，而是關於範圍的數據。

這個簡單的例子將更新textarea當按鈕被點擊時，顯示另一個div。並將項目添加到items數組。使用jQuery我們會被操縱通過JavaScript像$(el).val()和$(el).find()等的DOM，但在一個角控制器，我們不擔心DOM，只有數據：

演示：http://plnkr.co/edit/aL6p09DrQsUotu7vnceZ

app.controller('MainCtrl', function($scope) { 

    $scope.message = "Some data"; 
    $scope.testMethod = function() { 
    $scope.items.stuff.push($scope.message); 
    $scope.clicked = true;  
    $scope.message = $scope.message + ' you clicked me.'; 
    } 
    $scope.items = {stuff:['one', 'two', 'three'],id:1,name:'yeah'} 


}); 

<body ng-controller="MainCtrl"> 
    <div id="container" ng-form> 

    <textarea name="message" ng-model="message"></textarea> 
    <button value="send" ng-click="testMethod()">Send</button> 
</div> 
    <div ng-show="clicked"> 
    I was clicked 
    </div> 


    <h2>{{items.name}}</h2> 
    <div ng-repeat='item in items.stuff'> 
    {{item}} 
    </div> 

</body>

的上面是以控制器爲中心的，頁面上的操作元素是指令的角度的一部分，沒有更多關於你想要實現的內容的信息（它是否獲得表單輸入值？）很難指出你的確切方向這個特殊的問題。

來源

2013-05-11 15:28:01 lucuma

AngularJS - 傳遞元素融入到劇本和選擇

回答

相關問題