0
我有以下HTML：呼叫指令
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div class="container">
<div ng-view=""></div>
</div>
<!--Core JS Libraries-->
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<!--Core UI Library-->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//Define an angular module for our app
var myApp = angular.module('myApp', ['ngRoute']);
//Define Routing for app
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'pages/View1.html',
controller: 'HomeController'
}).
when('/design', {
templateUrl: 'pages/2.html',
controller: 'DesignController'
}).
otherwise({
redirectTo: '/home'
});
}]);
var controllers = {};
controllers.HomeController = function ($scope) {
$scope.GetView2 = function ($scope) {
$('#one').hide();
$('#two').show();
myApp.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'pages/view2.html'
}
});
};
};
controllers.DesignController = function ($scope) {
};
//adding the controllers to myApp angularjs app
myApp.controller(controllers);
</script>
</body>
</html>
而且我View1.html：
<button ng-click="GetView2()">Get View 2</button>
<br />
<div class="row" id="one">
<h1>View 1</h1>
</div>
<div class="row" id="two" style="display: none;">
<h1>View 2</h1>
<!--change the display to block and load partial here on above button click-->
<my-directive></my-directive>
</div>
而且View2.html：
<h3>Something in View2</h3>
现在，当我运行HTML时，在按钮上单击，查看1标题chanegs查看2标题，所以我的路由和GetView2（）函数调用s正在工作。但我的<my-directive>没有得到更新与我在templateUrl指令中调用的View2.html。
我是AngularJS的新手，尝试将ng-view和指令用于多视图类型的场景。我读过，我应该避免嵌套的意见，并实施指令，但我没有得到如何实现这样一个简单的情况。
我可以很容易地用jQuery替换ID为“2”的Div的内容，但我试图用适当的angularjs方法来做到这一点。
请发布指令'my-directive'代码 –
@MaximShoustin my-directive代码也存在于上面的代码中。我已经发布了整个代码。 –
@Pawan你正在控制器的作用域方法中定义你的指令。这显然是错误的，它不会工作。 – Stewie