JSFiddle - React, Tailwind, and code Playground

by qian jin

HTML

<div ng-app="app">
  <div ng-controller="myController">
    <div>{{test}}</div>
    <div directive-test-attribute></div>
    <directive-test-element></directive-test-element>
    <div ng-repeat="item in list">
      <directive-test-element></directive-test-element>
    </div>
    
    <div>{{myInputOne}}</div>
    <div>{{myInputTwo}}</div>
  </div>
</div>

CSS

input {
  margin: 10px;
}

JavaScript

var app = angular.module("app", []);
app.controller("myController", function($scope){
	$scope.test = '指令学习';
  $scope.list = [1,2,3];
})

app.directive("directiveTestAttribute", function() {
	return {
  	restrict: 'A',
    scope: true,
    template: '<input type="text" ng-model="myInputOne" /><span>{{myInputOne}}</span>',
  	link: function (scope, element, attr) {
    	scope.myInputOne = '属性';
    }
  }
})

app.directive("directiveTestElement", function() {
	return {
  	restrict: 'E',
    template: '<input type="text" ng-model="myInputTwo" /><span>{{myInputTwo}}</span>',
  	link: function (scope, element, attr) {
    	scope.myInputTwo = '元素1'
    }
  }
})