我可以将 ng-click 指令放在 JS 文件而不是 HTML 文件中吗?我应该怎么做?
Can I put ng-click directive in JS file instead of HTML file and how should I do it?
JS代码:
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
$scope.names = ['Larry', 'Curly', 'Moe'];
$scope.removeName = function(name) {
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
};
});
HTML代码:
<html ng-app="nameApp">
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" ng-click="removeName(name)">remove</a>
</li>
</ul>
</body>
</html>
这只是一个示例代码。我想知道我是否可以将 ng-click 指令放在 JS 文件而不是 HTMl 文件中,我应该怎么做。类似于我在将逻辑与 HTML.
分开时在示例中所做的事情
$(a).click(function(){
$(this).removeName(name);
}
您可以使用 angular.element() 代替 $()
示例代码:
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" id="clickme" ng-click="removeName(name)">remove</a>
</li>
</ul>
在 js 中
angular.element("#clickme").bind("click", function(e){
$scope.removeName();
});
您可以通过 ng-bind-html
完成,但我的示例看起来很疯狂。但在 html 侧
中不使用 ng-click
对我有用
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
$scope.names = ['Larry', 'Curly', 'Moe'];
$scope.ValOfRept = [];
for (var x = 0; x < $scope.names.length; x++) {
var element = '<a href=\"javascript:void(0);\" ng-click=\"removeName(valofrept)\">remove</a>';
var obj = { "name": $scope.names[x], "element": element };
$scope.ValOfRept.push(obj);
}
$scope.removeName = function (name) {
var i = $scope.names.indexOf(name);
$scope.ValOfRept.splice(i, 1);
};
});
nameApp.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);;
Html
<div ng-repeat="valofrept in ValOfRept">
{{valofrept.name}}
<div ng-bind-html="valofrept.element | to_trusted"></div>
<br />
</div>
"I want to know if I can put ng-click directive in JS file instead of HTMl file..."
指令的确切位置在 html no js 中。当您使用 jquery 时,您的 html 代码就像
<input type="button" value="x" id="test" onclick="$(this).removeName(name)"/>
然后在您的 js 中应用您想要的逻辑。
在angular中非常相似。 ng-click 等同于 onclick。在您的 html 代码中,您有指令 ng-click 并在您的控制器中应用逻辑。我不明白为什么 angular 你想混合它。
总之,不用做,不可以做。
我更喜欢使用 ng-click
,而不是 jQuery 方式绑定事件。
但是,正如您所问:您可以注入控制器的 $element
,并在其上绑定 on
事件,请参阅:
var app = angular.module("click", []);
app.controller("ctrl", function($scope, $element) {
$element.on("click", function() {
alert("clicked!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="click">
<div ng-controller="ctrl">
<input type="text" />
</div>
</div>
JS代码:
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
$scope.names = ['Larry', 'Curly', 'Moe'];
$scope.removeName = function(name) {
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
};
});
HTML代码:
<html ng-app="nameApp">
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" ng-click="removeName(name)">remove</a>
</li>
</ul>
</body>
</html>
这只是一个示例代码。我想知道我是否可以将 ng-click 指令放在 JS 文件而不是 HTMl 文件中,我应该怎么做。类似于我在将逻辑与 HTML.
分开时在示例中所做的事情$(a).click(function(){
$(this).removeName(name);
}
您可以使用 angular.element() 代替 $()
示例代码:
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" id="clickme" ng-click="removeName(name)">remove</a>
</li>
</ul>
在 js 中
angular.element("#clickme").bind("click", function(e){
$scope.removeName();
});
您可以通过 ng-bind-html
完成,但我的示例看起来很疯狂。但在 html 侧
ng-click
对我有用
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope) {
$scope.names = ['Larry', 'Curly', 'Moe'];
$scope.ValOfRept = [];
for (var x = 0; x < $scope.names.length; x++) {
var element = '<a href=\"javascript:void(0);\" ng-click=\"removeName(valofrept)\">remove</a>';
var obj = { "name": $scope.names[x], "element": element };
$scope.ValOfRept.push(obj);
}
$scope.removeName = function (name) {
var i = $scope.names.indexOf(name);
$scope.ValOfRept.splice(i, 1);
};
});
nameApp.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);;
Html
<div ng-repeat="valofrept in ValOfRept">
{{valofrept.name}}
<div ng-bind-html="valofrept.element | to_trusted"></div>
<br />
</div>
"I want to know if I can put ng-click directive in JS file instead of HTMl file..."
指令的确切位置在 html no js 中。当您使用 jquery 时,您的 html 代码就像
<input type="button" value="x" id="test" onclick="$(this).removeName(name)"/>
然后在您的 js 中应用您想要的逻辑。
在angular中非常相似。 ng-click 等同于 onclick。在您的 html 代码中,您有指令 ng-click 并在您的控制器中应用逻辑。我不明白为什么 angular 你想混合它。
总之,不用做,不可以做。
我更喜欢使用 ng-click
,而不是 jQuery 方式绑定事件。
但是,正如您所问:您可以注入控制器的 $element
,并在其上绑定 on
事件,请参阅:
var app = angular.module("click", []);
app.controller("ctrl", function($scope, $element) {
$element.on("click", function() {
alert("clicked!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="click">
<div ng-controller="ctrl">
<input type="text" />
</div>
</div>