0
私は最近angularjsを使用して開始し、私はこのコードのサンプルに出くわした： なぜjavascriptとhtmlのディレクティブ名が異なるのですが、それでも動作していますか？
// Code goes here
angular.module('Sojharo', [])
.directive('schrollBottom', function() {
return {
scope: {
schrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('schrollBottom', function (newValue) {
if (newValue)
{
$(element).scrollTop($(element)[0].scrollHeight);
}
});
}
}
})
.controller('MyController', function($scope) {
$scope.messages = [{'msg':'a'},{'msg':'ab'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'a'},{'msg':'last'}];
//$scope.messages = [];
$scope.im = {};
$scope.sendIM = function(msg) {
$scope.messages.push(msg);
$scope.im = {};
//$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
/*
var chatBox = document.getElementById('chatBox');
chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240);
*/
}
});#chatBox {
overflow : auto;
width : 80%;
height : 150px;
border: 1px solid;
padding: 10px 10px 10px 10px;
}
.chatMessage {
padding: 2px 40px;
background: #ffffff;
border-radius: 25px;
text-align: left;
margin-bottom: 8px;
}<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="Sojharo">
<div ng-controller="MyController">
<div id="chatBox" schroll-bottom="messages">
<div ng-repeat="message in messages">
<div class="chatMessage">
<div class="messageTextInMessage">{{message.msg}}</div>
</div>
</div>
</div>
<div class="chatControls">
<form ng-submit="sendIM(im)">
<input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" />
</form>
Type and press Enter
</div>
</div>
</div>
</body>
</html>あなたはそれに気づいた場合は、JavaScriptを、ディレクティブがschrollBottomと呼ばれているが、HTMLコードの上に、ディレクティブがありますschroll-Bottomと呼ばれ、動作しています！スクリプトと同じディレクティブ名を維持するために、このダッシュをhtmlコードから削除すると、動作しなくなります。どうしたの？誰かがなぜこのように起こるのか説明してもらえますか？
これは角形です。ディレクティブ名が 'sampleDirective'の場合、htmlの 'sample-directive'のように使用する必要があります。 – rtvalluri