Question

我正在努力学习AngularJS并且有一个我很难理解的问题/概念。

采取我创建的以下演示代码：

JS

var app = angular.module('customerPortalApp', ["ui.router"]);

app.config( function($stateProvider, $urlRouterProvider){

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1");

     $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "/static/html/partials/_campaign_title.html",
            controller: "CampaignCtrl"
        })

});



app.controller("CampaignCtrl", function($scope){

     $scope.loadCampaign = function(){
        alert("loaded campaign!")
    }

});

app.directive("campaign", function() {

    var MessageBox = angular.element('<div class="alert alert-success">hello</div>');

    var link = function (scope, element){
                 scope.loadCampaign();
            }


    return {
        restrict: "E",
        compile: function (template){
            template.append(MessageBox)

            return link

        }


    }


});

HTML

<div class="container" ng-app="customerPortalApp">

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>
    </div>
  </div>


     <div ng-controller="CampaignCtrl">
        <campaign>
            test
        </campaign>
    </div>
</div>

看看这段代码，我在我的配置中调用了控制器，我添加了新的 $ stateProvider ，现在负责模板加载，所以为什么我现在需要指令？在我的例子中，我现在不知道为什么我需要一个，可以ui-view用来容纳更多控制器吗？

Answer 1

对于您的示例，您可以使用 ui-view 。通常，我使用指令来表示可重用和指定的行为。

什么是指令？   在较高的层次上，指令是DOM元素上的标记（例如属性，元素名称或CSS类），它告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素，甚至转换DOM元素和它的孩子。

Angular内置了一组这些指令，如ngBind，ngModel和ngView。就像您创建控制器和服务一样，您可以为Angular创建自己的指令以供使用。当Angular引导您的应用程序时，HTML编译器会针对DOM元素遍历DOM匹配指令。

请参阅文档：Angular JS Documentation

以下示例，因为我使用了指令：

/* Get the boolean data and switch true or false for respective images. This Example use the bootstrap to show images */
App.directive('bool2image', function() {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { boolean: '@boolean' },
        template:   '<div ng-switch on="boolean">' +
                        '<div ng-switch-when="false"><span><i class=icon-remove></i></span></div>' +
                        '<div ng-switch-when="true"><span><i class=icon-ok></i></span></div>' +
                    '</div>'
    }
});

因此，要使用调用代码的指令：

<div class="bool2image" boolean="{{booleanData}}"></div>

我希望能帮助你。

在AngularJS中使用指令

1 个答案: