angularjsjs require : 'ngModel'

最新推荐文章于 2018-11-12 11:48:00 发布

原创最新推荐文章于 2018-11-12 11:48:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用AngularJS创建自定义指令，并与控制器结合使用来实现动态更新视图的功能。该示例中包含了基本的HTML结构、引入必要的库文件、定义模块、控制器以及自定义指令等关键部分。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var myapp = angular.module("myapp", []);
            myapp.controller("MyController", ['$scope', function($scope) {
                $scope.name = "mario";
                $scope.age = "13";
           }]);
           myapp.directive("cust", function() {
                return {
                   restrict : 'AE',
                   require : 'ngModel',
                   replace : true,
                   scope : {
                       model : '@atts'
                   },
                   template : '<div ng-click="change()">{{model}}' +
                               '</div>',
                   link : function(scope, elem, attrs, ctrl) {
                       scope.change = function() {
                           alert(ctrl.$viewValue);
                           ctrl.$setViewValue(scope.model + '123');
                       };
                   }
                }
           });
       </script>
       <style type="text/css">
       </style>
    </head>
    <body ng-app="myapp">
        <div class="container" ng-controller="MyController">
            <cust ng-model="name" atts="{{name}}"></cust>
            <cust ng-model="age" atts="{{age}}"></cust>
        </div>
    </body>

</html>

可以看到ｃｕｓｔ各自ｍｏｄｅｌ值不干扰．