Question

我对角度JS有点新意，这可能是一个简单的问题，但我坚持这个。我想要做的是，我有一个页面，在那个页面上我想添加一个模板。我的模板有点动态，并拥有自己的控制器。我的代码是这样的..

- 主页HTML -

<html ng-app="myApp">
    <body ng-controller="MyAppCtrl">
        <my-component>

        </my-component>
    </body>
</html>

- 主页JS -

var myAppModule = angular.module('myApp');

myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
  return {
      restrict: 'E',
      templateUrl: 'myComponent.aspx'
  };
});

- 模板（myComponent.aspx） -

<html>
    <!-- include template script -->
    <body ng-controller="ComponentCtrl">
        <div ng-click="showAlert()">
            myBtn
        </div>
    </body>
</html>

- 模板页面JS -

var templareModule = angular.module('myApp', []);

templareModule.controller('ComponentCtrl', function ($scope, $http) {
    $scope.showAlert = function () {
        alert("clicked");
    }
});

因此，我无法通过点击获得提醒。

提前致谢。

Answer 1

你真的不需要创建一个自定义指令，以便能够做你在问题中描述的内容，因为你是初学者，我建议你从简单开始，不做指令。您将需要使用ng-view标记和路由。您的代码还存在其他一些小问题，其中一些问题已在评论中被其他人指出。以下代码对我有用。

的index.html：

<html ng-app="myApp">
    <body>
        <h1>Test</h1>
        <div ng-view></div>

        <script> (Insert paths to required Angular scripts and your JS files)</script>
    </body>
</html>

App JS文件：

注意：您需要从Angular的网站下载ngRoute JavaScript文件并将其包含在项目中，以使路由正常工作。（转到他们网站上的下载，选择您的Angular版本，然后下载ngRoute）

angular.module('myApp', [ 'ngRoute' ])
    .config(['$routeProvider',
              function($routeProvider) {
                    $routeProvider.
                      when('/', {
                              templateUrl: 'myComponent.aspx',
                              controller: 'ComponentCtrl'
                      })
    }])
    .controller('ComponentCtrl', function ($scope) {
        $scope.showAlert = function () {
            alert("clicked");
        }
    });

myComponent.aspx：

<div class="ComponentCtrl">
    <div ng-click="showAlert()">
            myBtn
    </div>
</div>

如果您有疑问或仍无法让它发挥作用，请告诉我。我还建议您查看Egghead.io网站上的一些教程视频。它帮助我弄清了Angular的基础知识。

具有自己的角度js控制器的模板

1 个答案: