Fatal编程技术网
  • javascript/
  • Javascript 从AngularJS中分部内元素的ng click调用指令

Javascript 从AngularJS中分部内元素的ng click调用指令

javascript angularjs

Javascript 从AngularJS中分部内元素的ng click调用指令,javascript,angularjs,Javascript,Angularjs,我有以下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

我有以下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>


AngularJS演示
//为我们的应用程序定义一个角度模块
var myApp=angular.module（'myApp'，['ngRoute']）；
//定义应用程序的路由
myApp.config（['$routeProvider'，
函数（$routeProvider）{
$routeProvider。
当（“/home”{
templateUrl:'pages/View1.html'，
控制器：“HomeController”
}).
当（“/design”{
templateUrl:'pages/2.html'，
控制器：“设计控制器”
}).
否则({
重定向到：'/home'
});
}]);
变量控制器={}；
controllers.HomeController=函数（$scope）{
$scope.GetView2=函数（$scope）{
$（“#一”）.hide（）；
$（'#two'）.show（）；
myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
templateUrl:'pages/view2.html'
}
});
};
};
controllers.DesignController=函数（$scope）{
};
//将控制器添加到myApp angularjs应用程序
myApp.controller（控制器）；
和my 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>

获取视图2


视图1
视图2
和View2.html：

<h3>Something in View2</h3>

视图中的某些内容2
现在，当我运行HTML时，单击按钮，查看1标题更改为查看2标题，因此我的路由和GetView2（）函数调用正在工作。但是我的
没有使用View2.html更新，我在templateUrl中的指令中调用了View2.html

我是AngularJS的新手，尝试在多视图类型的场景中使用ng视图和指令。我已经读到，我应该避免嵌套视图，并实现指令，但我不知道如何实现这样一个简单的场景

我可以使用jQuery轻松地用id=“two”替换Div的内容，但我正在尝试用正确的angularjs方式来完成它。

有更好的方法来实现您正在尝试的内容

首先这个

 $('#one').hide();
 $('#two').show();
应该避免，因为这是来自控制器的直接DOM操作

您应该使用或
ng show
指令来显示和隐藏元素

<div class="row" id="one" ng-show="currentView='one'">
<h1>View 1</h1>
</div>
<div class="row" id="two" ng-show="currentView='two'">
</div>
对于您创建的指令，可以通过
ng include
执行，例如

并确保此路径上有视图。

请发布指令
我的指令
code@MaximShoustin我的指令代码也出现在上面的代码中。实际上，我已经发布了全部代码。@Pawan您正在控制器的scope方法中定义指令。这完全是错误的，而且不会起作用。@Stewie是的，我知道这是错误的。。但我无法找到如何实现这一点的正确答案。两点：第一：我在更改“1”和“2”div并按您所说添加ng show时遇到错误“TypeError:无法设置未定义的属性'currentView'。错误在第行：$scope.currentView='two'；在控制器中。第二个问题：在哪里添加Ok，我将指令定义移出了我的控制器，然后从templateUrl html文件填充指令。但这是在加载myview1.html本身时发生的。我希望此指令仅在调用GetView2（）函数时获取View2.html（该函数在单击时被调用）。有什么想法吗？因此，基本上，由于某些事件，如何以延迟加载方式在指令中加载模板。使用
ng if
而不是ng show，当条件为true时，DOM将被加载。

$scope.GetView2 = function ($scope) {
$scope.currentView='two';
}