单击后指示背景不变（通过事件绑定）

在以下单击div的示例中，背景必须更改为黄色。没有发生，也没有给出错误。 Pl，解释为什么！单击后指示背景不变（通过事件绑定）

//module declaration 
 
var app = angular.module("myApp",[]); 
 

 
//controller declaration 
 
app.controller('myCtrl',function($scope){ 
 
\t $scope.name = 'Peter'; 
 
}); 
 

 
//directive declaration 
 
app.directive('myStudent', function(){ 
 
\t return{ 
 
\t \t template:"<div style='width:200px;height:200px;'>Hi my friend!</div>", 
 
\t \t link: function(scope, elem, attrs){ 
 
\t \t \t elem.bind('click',function(){ 
 
\t \t \t \t elem.css("background","yellow"); 
 

 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
});

<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
{{name}}<br/> 
 
<my-student></my-student> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
</body>

来源

2017-03-01 Deadpool

当您创建从一个元素的指令，你必须记住，新创建的元素使用thew以下默认显示类型：

display: inline;

并由此，有一个0px的高度。

您可以通过简单添加display：block;该指令元素：

<my-student style="display: block;"></my-student>

或使用属性创建指令：

<div my-student></div>

下面是一个更新的例子：

//module declaration 
 
var app = angular.module("myApp",[]); 
 

 
//controller declaration 
 
app.controller('myCtrl',function($scope){ 
 
\t $scope.name = 'Peter'; 
 
}); 
 

 
//directive declaration 
 
app.directive('myStudent', function(){ 
 
\t return{ 
 
\t \t template:"<div style='width:200px;height:200px;'>Hi my friend!</div>", 
 
\t \t link: function(scope, elem, attrs){ 
 
\t \t \t elem.bind('click',function(){ 
 
\t \t \t \t elem.css("background","yellow"); 
 

 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
});

<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
{{name}}<br/> 
 
<my-student style="display: block;"></my-student> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
</body>

在任何情况下，我会建议你坚持角ng-cli对于这种交互CK指令，在下面的例子：

var app = angular.module("myApp",[]); 
 

 
app.controller('myCtrl',function($scope){ 
 
\t $scope.name = 'Peter'; 
 
}); 
 

 
app.directive('myStudent', function(){ 
 
\t return{ 
 
\t \t template:"<div ng-click='changeBackground()' style='height:200px;' ng-style='divStyle'>Hi my friend!</div>", 
 
\t \t link: function(scope, elem, attrs){ 
 
     scope.changeBackground =() => { 
 
     scope.divStyle = { backgroundColor: 'yellow' } 
 
     } 
 
\t \t } 
 
\t } 
 
});

<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
{{name}}<br/> 
 
<div my-student></div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
 
</body>

来源

2017-03-01 12:47:14

单击后指示背景不变（通过事件绑定）

回答

相关问题